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性能实践日志》