天天看点

一起聊聊localStorage和sessionStorage吧

使用本地存储

使用全局属性localStorage访问本地存储功能,这个属性会返回一个Storage对象,Storage对象被用来保存键/值形式的字符串对。其包含成员如下:

  • clear()移除保存的键/值对
  • getItem(key)取得与指定键关联的值,返回字符串
  • key(index)取得指定索引的键,返回字符串
  • length返回已保存的键值对数量
  • removeItem(key)移除指定键对应的键值对,返回字符串
  • setItem(key,value)增加一个新的键值对,如果键已使用就更新值,返回void
  • [key]以数组的访问形式取得与指定键关联的值,返回字符串

通过本地存储功能保存的数据对所有来源相同的文档都是可用的,某个文档对本地存储进行修改时,会触发storage事件,我们可以监听其他同源文档上的这个事件来保证我们能跟上最新的变化。

与storage事件同时指派的对象是一个StorageEvent对象,它的成员如下:

  • key返回发生变化的键,返回值为字符串
  • oldValue返回关联此键的旧值,返回值为字符串
  • newValue返回关联此键的新值,返回值为字符串
  • url返回制造变化的文档url,返回值为字符串
  • storageArea返回发生变化的Storage对象,返回值为Storage对象

使用会话存储

会话存储(session storage)的工作方式和本地存储很接近,不同之处在于数据是各个浏览上下文私有的,会在文档关闭时移除。使用sessionStorage访问会话存储也会返回一个Storage对象。

由于它的可见性和寿命受到限制,所以会影响storage事件的处理方式,即不能在共享存储的文档里触发,只能在内嵌文档中触发,比如iframe里的文档。

继续阅读