更高效的使用 localStorage
与 sessionStorage
。
下文统一使用 WebStorage 来表示 localStorage
与 sessionStorage
。
读取与存储的都是 JSON 数据, 这意味着你能保留数据类型:
const ls = new NamedStorage()
ls.set('key', 1)
typeof ls.get('key') // "number"
初始化 NamedStorage 实例时, 你可以提供一个命名空间(NamedStorage 默认提供了一个命名空间——"d"
, 即 default 的首字母), 则对此实例的所有增删改查操作都会以这个命名空间作为前缀, 这能有效的避免冲突:
const foo = new NamedStorage('foo')
const bar = new NamedStorage('bar')
foo.set('bar', 1)
bar.set('bar', 2)
localStorage.getItem('bar') // null
localStorage.getItem('foo:bar') // "1"
localStorage.getItem('bar:bar') // "2"
相同的存储空间与命名空间会得到同一个实例:
const ss1 = new NamedStorage({ name: 'foo', session: true, cache: false })
const ss2 = new NamedStorage({ name: 'foo', session: true, cache: true }) // 因为是同一个实例, 所以重新定义 `cache` 与 `lazySave` 配置不会生效
ss1 === ss2 // true
const ls = new NamedStorage('foo')
ls === ss1 // false
因为有了命名空间的支持, 所以清空此实例的数据时可以选择只清空此命名空间内的数据, 而不是清空整个 WebStorage。
const ls = new NamedStorage('foo')
ls.set('bar', 1)
localStorage.getItem('foo:bar') // '1'
localStorage.setItem('bar', '2')
ls.clear()
ls.get('bar') // undefined
localStorage.getItem('foo:bar') // null
localStorage.getItem('bar') // '2'
ls.clear(true)
localStorage.getItem('bar') // null
相比起每次读取数据时都从 WebStorage 内读取, NamedStorage 能缓存第一次读取的值, 并在后面读取时直接使用缓存值。
NamedStorage 提供一个"懒保存"的功能, 如果启用的话, 则每次设置值时不会直接保存到 WebStorage 中, 而是在 window.onunload
事件中统一保存:
const ls = new NamedStorage({ lazySave: true })
ls.set('foo', 'bar')
localStorage.getItem('d:foo') // null
window.dispatchEvent(new Event('unload'))
localStorage.getItem('d:foo') // "\"bar\""
注意: 在某些移动设备上 unload
事件不一定会触发, 所以请慎用此功能。
等同于 new NamedStorage({ name: name })
。
默认情况下使用 localStorage
。设置此项为 true
则使用 sessionStorage
。
此实例的命名空间, 默认为 "d"
。详情见命名空间。
const ls = new NamedStorage({ name: 'hello' })
ls.namespace // 'hello:' -> 后面多了一个冒号
默认值为 true
。设为 false
可禁用缓存功能。详情见缓存数据。
默认值为 false
。启用此功能需要启用缓存。详情见"懒保存"。
设置数据。如果 value
是 null
或 undefined
则删除这个数据。
获取数据。
删除数据。
默认情况下, 这个方法只会删除当前命名空间内的数据, 但如果指定 whole
为 true
, 则会删除整个 WebStorage 内的数据。详情见命名空间。
不要去更改这些属性的值, 你应该把这些属性都视为只读的。
'local'
或 'session'
, 取决于你传入的 options.session
参数。
当前实例指向的存储空间, localStorage
或 sessionStorage
。
当前实例是否启用了缓存功能。
缓存的数据。如果没有启用缓存功能, 则此属性的值是 undefined
。
当前实例的命名空间。
当前实例是否启用了"懒保存"功能。
如果你不自定义 name
的话, 你每次得到的都是同一个实例:
const s1 = new NamedStorage({ cache: false })
const s2 = new NamedStorage({ cache: true })
s1 === s2 // true
s2.namespace === 'd:' // true
s2.useCache // false
const ls = new NamedStorage()
ls.set('foo', 'bar')
localStorage.getItem('d:foo') // 'bar
localStorage.setItem('d:foo', 'changed')
ls.get('foo') // 'bar'
推荐统一使用 NamedStorage 操作存储空间。
MIT