NamedStorage
更高效的使用 localStorage
与 sessionStorage
。
下文统一使用 WebStorage 来表示 localStorage
与 sessionStorage
。
下载
使用 NPM 安装:
npm install namedstorage
或者直接下载: https://unpkg.com/namedstorage/namedstorage.min.js
特点及使用示例
JSON 友好
读取与存储的都是 JSON 数据, 这意味着你能保留数据类型:
const ls = lstypeof ls // "number"
命名空间
初始化 NamedStorage 实例时, 你可以提供一个命名空间(NamedStorage 默认提供了一个命名空间——"d"
, 即 default 的首字母), 则对此实例的所有增删改查操作都会以这个命名空间作为前缀, 这能有效的避免冲突:
const foo = 'foo'const bar = 'bar'foobarlocalStorage // nulllocalStorage // "1"localStorage // "2"
相同的存储空间与命名空间会得到同一个实例:
const ss1 = name: 'foo' session: true cache: false const ss2 = name: 'foo' session: true cache: true // 因为是同一个实例, 所以重新定义 `cache` 与 `lazySave` 配置不会生效ss1 === ss2 // true const ls = 'foo'ls === ss1 // false
因为有了命名空间的支持, 所以清空此实例的数据时可以选择只清空此命名空间内的数据, 而不是清空整个 WebStorage。
const ls = 'foo'lslocalStorage // '1'localStorage lsclearls // undefinedlocalStorage // nulllocalStorage // '2' lscleartruelocalStorage // null
缓存数据
相比起每次读取数据时都从 WebStorage 内读取, NamedStorage 能缓存第一次读取的值, 并在后面读取时直接使用缓存值。
API
new NamedStorage(name)
name (String)
等同于 new NamedStorage({ name: name })
。
new NamedStorage([options])
options.session (Boolean)
默认情况下使用 localStorage
。设置此项为 true
则使用 sessionStorage
。
options.name (String)
此实例的命名空间, 默认为 "d"
。详情见命名空间。
const ls = name: 'hello' lsnamespace // 'hello:' -> 后面多了一个冒号
options.cache (Boolean)
默认值为 true
。设为 false
可禁用缓存功能。详情见缓存数据。
方法
NamedStorage.prototype.set(key[, value])
设置数据。如果 value
是 null
或 undefined
则删除这个数据。
NamedStorage.prototype.get(key)
获取数据。
NamedStorage.prototype.remove(key)
删除数据。
NamedStorage.prototype.clear(whole)
默认情况下, 这个方法只会删除当前命名空间内的数据, 但如果指定 whole
为 true
, 则会删除整个 WebStorage 内的数据。详情见命名空间。
属性
不要去更改这些属性的值, 你应该把这些属性都视为只读的。
this.type (String)
'local'
或 'session'
, 取决于你传入的 options.session
参数。
this.storage
当前实例指向的存储空间, localStorage
或 sessionStorage
。
this.useCache (Boolean)
当前实例是否启用了缓存功能。
this.caches (Object)
缓存的数据。如果没有启用缓存功能, 则此属性的值是 undefined
。
this.namespace (String)
当前实例的命名空间。
陷阱
"d"
NamedStorage 提供了一个默认的命名空间——如果你不自定义 name
的话, 你每次得到的都是同一个实例:
const s1 = cache: false const s2 = cache: true s1 === s2 // trues2namespace === 'd:' // trues2useCache // false
如果你启用了缓存, 则直接更改 WebStorage 内的值不会反映到 NamedStorage
const ls = lslocalStorage // 'bar localStoragels // 'bar'
推荐统一使用 NamedStorage 操作存储空间。
许可
MIT