浅谈前端存储

摘要：浅谈前端存储前言应用允许使用浏览器提供的实现将数据存储到用户的电脑上，这种客户端存储相当于赋予了浏览器记忆功能。键被更改之前的值限制对于和的存储限制因浏览器而异。最初是在客户端用于存储会话信息的。

浅谈前端存储 前言

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

客户端存储遵循“同源策略”，因此不同站点的页面是无法相互读取对方存储的数据

客户端存储有以下几种形式：

Web存储

cookie

IE User Data

离线Web应用

web数据库

文件系统API

Web Storgage

实现了“web存储”草案标准的浏览器在Window对象上定义了两个属性：localStorage和sessionStorage。

支持这两个属性的浏览器包括IE8+、Firefox3.5+、Chrome4+、Opera10.5+

webStorage的目的是克服由cookie带来的一些限制，当数据需要被严格控制在客户端上时，无须持续地将数据发回服务器。
webStorage的两个主要目标是：

提供一种在cookie之外存储会话数据的途径

提供一种存储大量可以跨会话存在的数据的机制

有效期

通过localStorage存储的数据是永久性的，除非web应用刻意删除存储的数据，或者用户通过设置浏览器配置（浏览器提供的特定的UI）来删除，否则数据将一直保留在用户的电脑上永不过期

sessionStorage的有效期和存储数据的脚本所在的最顶层的窗口或者是浏览器标签页是一样的。一旦窗口或者标签页被永久关闭了，那么所有通过sessionStorage存储的数据也都被删除了。（现代浏览器已经具备了重新打开最近关闭的标签页随后恢复上一次浏览的会话功能，因此，这些标签页以及与之相关的sessionStorage的有效期可能会更长）。

作用域

localStorage的作用域是限定在文档源级别的，它同样也受浏览器供应商限制。

sessionStorage的作用域也限定在文档源中，不仅如此她还被限定在窗口中

存储API

localStorage和sessionStorage通常被当做普通的JS对象使用，这两个对象提供了正式的API

保存数据：localStorage.setItem( key, value ); sessionStorage.setItem( key, value );

读取数据：localStorage.getItem( key ); sessionStorage.getItem( key );

删除单个数据：localStorage.removeItem( key ); sessionStorage.removeItem( key );

删除所有数据：localStorage.clear( ); sessionStorage.clear( );

得到某个索引的key：localStorage.key( index ); sessionStorage.key( index );

注：两个都有属性 length 表示key 的个数，也即 key 长度。key和value都必须为字符串。

Storage事件

对Storage对象进行任何修改，都会在文档上触发storage事件。这个事件的event对象有以下属性：

domain：发生变化的存储空间的域名

key：设置或者删除的键名

newValue：如果是设置值，则是新值；如果是删除键，则是null。

oldValue：键被更改之前的值

限制

对于localStorage和sessionStorage的存储限制因浏览器而异。具体参考：http://dev-test.nemikor.com/web-storage/support-test/

Cookie 概念

cookie是指Web浏览器存储的少量数据，同时它是与具体的Web页面或者站点相关的。最初是在客户端用于存储会话信息的。

有效期

cookie默认的有效期很短暂，他只能持续在web浏览器的会话期间，一旦用户关闭浏览器，cookie保存的数据就丢失。

注：与sessionStorage有效期不同，它的有效期和整个浏览器进程而不是单个浏览器窗口的有效期一致。

如果需要延长cookie的有效期，可以通过设置max-age属性，并明确告诉浏览器cookie的有效期有多长。

作用域

cookie的作用域是通过文档源和文档路径来确定的。可通过path设置路径，domain设置域名。

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