彻底理解sessionStorage和localStorage

本文会分别介绍localStorage和sessionStorage的用法,文章最后将这两种Web存储方案进行对比。

localStorage

数据限制

虽然草案标准指出,storage应该被实现为既可以存储结构化数据(对象和数组),也可以存储为原始数据类型(数字、字符串、布尔值、null、undefined),甚至还可以存储诸如日期,正则表达式甚至文件对象在内的内置类型的数据。

然而实际上,目前为止,浏览器仅仅支持存储字符串数据类型,如果需要存储其他类型,需要开发者手动编码解码。

数据有效期

通过localStorage存储的数据是永久性的,除非用户调用其API刻意删除数据,或者用户使用浏览器自带配置UI的清除隐私数据将localStorage清除,否则使用localStorage创建的数据将永远存在于用户的电脑上,永不过期。

数据作用域

localStorage的作用于被限定于文档源中,同样受到同源策略的限制。

同源指的是三个方面的同源必须全部满足:

  • 协议相同(http与https不同源)
  • 主机名相同(blog.example.com和api.example.com不同源,更别说一级域名或顶级域名不同源了)
  • 端口号相同(443与80端口不同源)

除了同源策略的限制以外,还应注意下面的情况也影响不能获取先前使用localStorage存储的数据:

  • 虽然文档同源,但也受到不同的浏览器供应商的限制,也就是说在Firefox中存储数据,在chrome中无法获取。

刨去上面的限制因素,localStorage便可以永久存储数据,并实现同源同款浏览器同一浏览器窗口的不同标签页或几个浏览器窗口的标签页下数据的共享了。

实现监听其他标签页或者其他浏览器窗口修改数据的事件可以参考下方的 API用例 代码。

监听数据更改的使用场景有:

  • 多个标签页或窗口打开同一页面共享相同的修改后的配置项,比如是否启动动画,或用户选择了哪一个绘图工具等。

API用例

  • 存储一条数据

    localStorage.my_website = 'shuaihua.cc'
    localStorage.setItem('my_website', 'shuaihua.cc')
    
  • 获取一条数据

    localStorage.my_website
    localStorage.getItem('my_website')
    
  • 删除一条数据

    delete localStorage.my_website  //尽在非IE8中适用
    localStorage.removeItem('my_website')
    
  • 清空全部数据

    localStorage.clear()
    
  • 根据索引值获取键

    localStorage.key(0)  //获取第1个数据的键
    
  • 添加事件监听器

    window.addEventListener('storage',function(e){
    //e.key 被设置或者移除的项的名字或者键名,如果调用的是clear()函数,那么该属性值为null。
    //e.newValue  保存该项的新值;当调用removeItem()时,该属性值为null。
    //e.oldValue  改变或者删除该项前,保存该项原先的值;当插入一个新项的时候,该属性值为null。
    //e.storageArea  这个属性值就好比localStorage。
    //e.url  触发该存储变化脚本所在文档的URL。
    },false)
    window.attachEvent()  //IE下适用该方法注册事件
    window.onstorage = function(){} //通过设置属性
    

sessionStorage

数据限制

与localStorage相同,截至目前为止,大部分浏览器仅支持字符串的数据,如果需要其他数据格式,则需要开发者存储前自行编码,使用前自行解码。

数据有效期

sessionStorage的有效期与存储脚本所在的最顶层窗口或浏览器的标签页是一样的,也就是说:

  • 如果一个标签页下包含多个 iframe 或 存在 iframe 嵌套的情况,则这些iframe中的脚本使用到sessionStorage的有效期都是最外层文档或标签页的生命周期
  • 开启一个标签页就相当于开启一个新的会话,所以对于sessionStorage来说代表着开启全新的会话,标签关闭代表着本次会话sessionStorage存储的所有数据全部丢失。

不过需要注意的是,现代浏览器会有重新打开最近关闭的标签页功能,或者上次浏览器意外关闭,重新打开后提醒你恢复上次浏览器标签页,这种情况下,上次的sessionStorage也应会被恢复。

数据作用域

sessionStorage遵守的同源策略与localStorage相同,唯一不同的是:

  • sessionStorage的作用域仅在当前标签页中可共享,同一浏览器窗口的其他标签页都有自己的sessionStorag,且不能共享,即使满足同源策略也不能共享。

不过好在,同意标签下的所有 iframe 之间的sessionStorage是共享的。

API用例

sessionStorage的API与事件监听机制相同,需要注意的是:

sessionStorage的事件监听机制收到上述的作用域限制,只有同一标签页下的其他iframe文档(且同源)才能接收到监听的storage事件。

几句话总结localStorage和sessionStorage:

  • session和local都受到同源策略的限制。
  • local与session从名字上就能区分其有效期与作用域的差别,而他们的有效期也决定了作用域,作用域也影响了有效期。
  • session与local的API相同,只是调用表达式的对象不同而已。
  • 数据格式按草案规范来讲是不受限制的,可以像操作JavaScript对象那样来操作storage对象,但考虑到浏览器供应商的具体实现,字符串格式的数据才被支持,不过开发者可以自行编码解码。
  • 就存储空间而言,不同浏览器各自情况不同,不过根据木桶效应,大约为5MB。火狐浏览器会在超出最高限制时提醒你重新设置上限。
  • 就安全性而言,storage非常不安全,所以不要试图用它来存储隐私内容,比如密码。

下一篇《尝尝cookie甜甜的曲奇饼干》

上一篇《Nodejs文件上传》

永久链接 http://www.shuaihua.cc/article/thorough-understanding-sessionstorage-localstorage

快速跳转 心头好文 - storage - 《彻底理解sessionStorage和localStorage》

发布日期 2017年11月23日 星期四

版权声明 自由转载-非商用-非衍生-保持署名(创意共享3.0许可证