npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@realign-zone/local-storage

v1.1.2

Published

Encapsulate a LocalStorage Class, just use it

Downloads

23

Readme

LocalStorage

NPM version

Introduction

让使用 localStorage 变得更简单

  • [x] 原生 localStorage 只能存储字符串
  • [x] 对于复杂数据结构,在存储之前,必须先进行序列化
  • [x] 对于复杂数据结构,在读取的时候,又需要反序列化
  • [x] 直接操作数据,可能会对数据造成覆盖,中间最好有一层检测机制,保证数据的准确性
  • [x] 对于 查询当前剩余容量 获取key列表 等一些快捷操作,也做了封装
  • [x] 记录添加/更新时间
  • [x] 设置时效,过期自动清除

针对上述,对 localStorage 进行一次封装,默认对数据进行序列化、反序列化、覆盖提醒、快捷处理等操作,用户只需关心自己要保存、获取的数据的一系列操作。

Usage

ES6

import LS from '@realign-zone/local-storage';

UMD

// download files
use @realign-zone/local-storage/dist/local-storage.umd.min.js

Browser

<script src="/local-storage.js"></script>
<script>
    LocalStorage.get('xxx');
</script>

$VALUE = {
    createTime: timestamp,
    value
};

API

set(key, value, opts)

存储数据,返回 set 的对象

| args | description | note | | --- | --- | --- | | key | 存储数据的key | | | value | 存储数据的实际值 | | | opts | .cover: 是否覆盖已存在的数据 | | | | .expiry: 有效期【时间戳/时长描述】 | 时间戳:有效截止时间点,eg:1546786492336时长描述:数据存活时长,eg:1ms,2s,3m,4h,5d、6w,7mo,8y |

// Example
LS.set('author', {name: 'realign', age: 16}, {expiry: '3y'});

return { key, val: $VALUE };

get(key)

获取数据,返回 对应值(会保持原来的数据类型)

// Example
LS.get('name');
return $VALUE

has(key)

判断是否存在此 key,返回 boolean

// Example
LS.has('name'); // true
LS.has('my'); // false

remove(key)

删除 key 对应的这条数据,返回 boolean,该条数据是否仍存在

  • 已成功删除 true(传入不存在的key,仍会返回 true)
  • 未成功删除 false
// Example
LS.remove('name'); // true

clear

清空当前域下 localstorage 数据

// Example
LS.clear(); // true

getKeyList

获取 localstorage 所有 key

// Example
LS.getKeyList(); // ['name', 'age']

getAll

获取 localstorage 所有 数据

// Example
LS.getAll(); // { 'name': $VALUE, 'age': $VALUE }

getSurplusCapacityKb

获取 localstorage 剩余容量(kb)

// Example
LS.getSurplusCapacityKb(); // 5119.998046875