js客户端存储之Web存储

WEB存储

客户端存储有几种方式，WEB存储就是其中一种。最初作为H5的一部分被定义成API形式，后来被剥离出来作为独立的标准。所描述的API包含localStorage对象和sessionStorage对象，这两个对象实际都代表同一个Storage对象，是持久化关联数组。是名值对的映射表。
localStorage和sessionStorage区别在于存储的有效期和作用域的不同：数据可以存储多长时间以及谁拥有数据的访问权。

浏览器兼容性

---

存储有效期

• localStorage
  永久性。除非WEB应用刻意删除存储的数据，或者用户通过设置浏览器配置来删除，否则数据会一直保留在用户电脑上，永不过期。实际上，localStorage的数据是写入磁盘中，每次读取数据时，实际上是从硬盘驱动器上读取这些字节。

• sessionStorage
  窗口或标签页被永久关闭，则通过sessionStorage存储的数据也被删除。

---

作用域

都是限定在文档源级别。（非同源文档间无法共享）

• localStorage

  • 同源的文档间共享相同的localStorage数据。它们之间可以互相读取甚至覆盖对方数据。非同源的文档间互相都不能读取或覆盖对方的数据（即使运行的脚本是来自同一台第三方服务器也不行）。

  • 受浏览器供应商限制。不能访问上次存储在不同浏览器的数据。

• sessionStorage

  • 限定在窗口中。如果同源的文档渲染在不同的浏览器标签页中，那么它们的数据也无法共享。【窗口指的是顶级窗口。若一个标签页中有两个<iframe>包含同源文档也可共享】

  • 一个标签页中的脚本是无法读取或覆盖由另一个标签页脚本写入的数据。
    【补充：文档流是通过协议、主机名以及端口来决定的。】

存储API

localStorage与sessionStorage均适用。

localStorage.setItem("x",1);//以"x"的名字存储一个数值
localStorage.x = 1;//直接向 Web 存储对象添加键/值对

localStorage.getItem("x");//获取数值
localStorage.x;//直接从 Web 存储对象中检索键/值对

localStorage.removeItem("x");//删除“x”项。
//removeItem是唯一通用的能删除单个名值对的方式。（因为IE8不支持delete操作符）
localStorage.clear();//全部删除。唯一能删除存储对象中所有名值对的方式

//将一个数组存储为字符串
var myArray = new Array('First Name', 'Last Name', 'Email Address');
localStorage.formData = JSON.stringify(myArray);

//检索数组的字符串版本并将它转换成一个可用的 JavaScript 数组
var myArray = JSON.parse(localStorage.formData);

存储事件

无论什么时候存储在localStorage或sessionStorage的数据发送改变，浏览器都会在其它对该数据可见的窗口对象上触发存储事件。
【对于localStorage，如果浏览器两个标签页都打开了来自同源的页面，其中一个页面存储了数据，另外一个标签页就会接收到一个存储事件。】
【对于sessionStorage，只有当相互牵连的窗口的时候才会触发存储事件】
【只有当存储数据真正发生改变的时候才会触发存储事件】

与存储事件相关的事件对象属性

• key 被设置或移除的项的名字或者键名。如果调用clear()，则该属性值为null

• newValue 保存该项的新值。若调用removeItem()，该属性值为null

• oldValue 改变或删除该项前，保存该项原先的值。插入一个新项时，该属性值为null

• storageArea 好比是目标Window对象上的localStorage属性或sessionStorage属性

• url 触发该存储变化脚本所在文档的URL

【localStorage和存储事件都是采用广播机制，浏览器会对目前正在访问同样站点的所有窗口发送消息。】

安全性

【翻译的比较烂。可以去看官方解释】

• DNS spoofing attacks
  针对DNS欺骗攻击，页面可以使用TLS，来确保他们是来自同一个域从而允许访问。

• Cross-directory attacks
  共享一个主机名的不同用户，都共享同一个local storage object。在共享主机时需要谨慎使用。因为其他共享用户可以读取并且覆盖数据。【PS:Even if a path-restriction feature was made available, the usual DOM scripting security model would make it trivial to bypass this protection and access the data from any path.】

• Implementation risks
  主要风险在于恶意网站可以从其他域读取信息并且对其他域写入恶意数据。让第三方站点读取其他域的数据会造成信息泄露（information leakage）。让第三方站点写其他域存储的数据也会造成信息欺骗（information spoofing）

【Web 存储并不比 cookies 安全。所以不要在客户端存储敏感信息，比如密码或信用卡信息。】

localStorage优化

由于localStorage的数据是被写入磁盘中，每次读取数据是从硬盘驱动器中读取，速度会很慢。除此之外，从单一localStorage键值中读取的数据量对速度是没有影响， 而读取次数越多，速度越慢。
最佳策略：使用尽可能少的键值，存取尽可能多的数据。

参考内容：《js权威指南》
使用 HTML5 Web 存储实现离线工作
《Web性能实践日志》