HeliumLau
HeliumLau

客户端存储和应用程序存储

客户端存储

Web应用允许使用浏览器提供的API实现将数据存储到用户的电脑上。这种客户端存储相当于赋予了Web浏览器记忆能力。

客户端存储遵循“同源策略”，因此不同站点的页面时无法互相读取对方存储的数据，而同一站点的不同页面之间是可以互相共享存储数据的，他为我们提供了一种通信机制。

客户端存储包括Web存储（localStorage与sessionStorage）、cookie、IE User Data、离线Web应用、Web数据库、文件系统API。

其他暂时不介绍，今天就介绍Web存储以及cookie。

Web储存优点多，但是对于早期浏览器并不兼容。
cookie使用所有新旧浏览器，但是其API非常复杂，能蕴藏的信息量少，而且每次Http请求都得带这些数据到服务器，占用了带宽。

但是，本文章记录的客户端存储不应该用来保存敏感信息，因为所有数据都是未加密形式的，可以被计算机任何有访问权限的人访问。

localStorage 和 sessionStorage

localStorage和sessionStorage是window的对象。

localStorage和sessionStorage的主要区别在于存储的有效期和作用域：数据可以存储多长时间以及谁拥有数据的访问权。

Web存储让我们可以存储结构化的数据（对象和数组），但是如果不能，也可以用另外一种方法(JSON)。

localStorage.data = JSON.stringify(data);
var data = JSON.parse(localStorage.data);

存储有效期和作用域

对于存储有效期来说，
localStorage存储的数据是永久性的，除非Web应用刻意删除存储的数据，或者用户通过设置浏览器配置来删除，否则数据一致存在。
sessionStorage存储的数据只是在会话期间，比如窗口或者标签页被永远关闭了，那么所有通过sessionStorage存储的数据也都被删除了。

对于作用域来说，
localStorage的作用域是限定在文档源级别的，文档源由协议、主机名以及端口三者来确定的。同源的文档间共享同样的localStorage数据。但是不同浏览器会有所限制。
sessionStorage的作用域也是限定在文档源中，因此非同源文档之间是无法共享的，另外它还被限制在窗口中。

存储API

localStorage和sessionStorage通常被当做普通的JavaScript对象使用，通过设置属性来存储字符串值，查询该属性来读取该值。但是，还有更正式的API。

localStorage.setItem("x", 1); // 以"x"的名字存储一个数值
localStorage.getItem("x");
localStorage.removeItem("x");
localStorage.clear();
localStorage.key(i);

对象和数组类型的值通常是可变的，因此存储对象要求存储他们的副本，以确保之后任何对这类对象的改变都不影响到存储的对象。

存储事件

无论什么时候存储在localStorage或者sessionStorage的数据发生改变，浏览器都会在其他对该数据可见的窗口对象上触发存储事件（但是，在对数据进行改变的窗口对象上是不会出发的。）

与存储事件相关的事件对象有5个较为重要的属性：
key
被设置或者被移除的项的名字或者键名
newValue
保存该项的新值
oldValue
改变或者删除该项前，保存的值
storageArea
好比目标对象上的localStorage或者sessionStorage属性
url
触发该存储变化脚本所在本当的URL

localStorage和存储事件使采用广播机制的
存储的是数组字符串化后的字符串

cookie是指Web浏览器存储的少量数据，同时它是与具体的Web页面或者站点相关的。

cookie可以直接通过对Document对象的cookie属性来进行操作。

检测cookie是否启用： navigator.cookieEnabled = true

cookie属性的有效期和作用域

除了名(name)和值(value)，cookie还有一些可选的属性来控制cookie的有效期和作用域。

有效期
cookie默认的有效期就在Web浏览器的会话期间（但这和sessionStorage不同，cookie的有效期与整个浏览器的进程而不是单个浏览器窗口的有效期一致）。但是可以通过设置max-age属性，明确高数浏览器cookie的有效期是多长（单位是秒）。一旦设置了有效期，浏览器就会将cookie数据存储在一个文件中，直到过了指定的有效期才会删除该文件。

作用域
cookie的作用域是通过文档源和文档路径来确定的。该作用域通过cookie的path和domain属性也是可配置的。默认情况下，cookie和创建它的Web页面有关，并对该Web页面以及和该Web页面同目录或者子目录的其他Web页面课件。

cookie的path属性不能被用做访问控制机制，如果一个Web页面想要读取同一站点其他页面的cookie，只要简单地把其他页面以隐藏