Web存储之LocalStorage初探

Web存储之LocalStorage初探

HTML5的发布和定稿为前端界带来巨大的变化，新增的API和特性给业务带来了更多可能性，让用户体验拥有了更可能的丰富。

· HTML Geolocation 可以定位到用户的地理位置
· HTML Drag and Drop 拖拽API，可以实现更简单有效的交互方式
· HTML Local Storage 本地存储方案， 配合离线缓存可以实现WebApp的本地化
· HTML Application Cache 离线缓存，可以将WebApp离线到本地使用
· HTML Web Workers JS版多线程，适合一些计算密集型的业务
· HTML SSE Server-sent Event 服务器推送技术，可以把主动权交给服务器端，往客户端主动推送数据、消息
· HTML Canvas/WebGL HTML图像处理API，能够实现更绚烂和丰富的效果
· HTML Audio/Video HTML音视频API，能够更方便处理音视频

今天，我就来简单介绍一下LocalStorage 这个本地存储。

首先来看一下 关于 Storage 的API。

1. Storage.length 只读

   返回一个整数，表示存储在 Storage 对象中的数据项数量。

2. Storage.key()

   该方法接受一个数值 n 作为参数，并返回存储中的第 n 个键名。

3. Storage.getItem()

   该方法接受一个键名作为参数，返回键名对应的值。

4. Storage.setItem()

   该方法接受一个键名和值作为参数，将会把键值对添加到存储中，如果键名存在，则更新其对应的值。

5. Storage.removeItem()

   该方法接受一个键名作为参数，并把该键名从存储中删除。

6. Storage.clear()

   调用该方法会清空存储中的所有键名。
   

LocalStorage 和 SessionStorage 共同实现了这些API，可以看到API非常简单，只有5个API函数和一个只读的length属性，我们先看一下LocalStorage 的 DEMO，里面示范了除了key() 函数之外的API。

rLVvMN

可以看到，storage 的API用例还是很简单的。

还有一个storage 的 Event事件，在LocalStorage 和 sessionStorage 变更的时候会触发一个Storage 的事件，但是只能在同源策略下触发，并且在当前窗口是不能触发的。也就是说在同一个浏览器中，A标签页变更Storage，B标签页会触发这个事件，在A里面是不行的，同时不在同一个浏览器里面也是无法触发的。

Storage事件的属性如下：

target         Read only       EventTarget     The event target (the topmost target in the DOM tree).
type           Read only       DOMString       The type of event.
bubbles        Read only       boolean         Does the event normally bubble?
cancelable     Read only       boolean         Is it possible to cancel the event?
key            Read only       DOMString (string)  The key being changed.
oldValue       Read only       DOMString (string)  The old value of the key being changed.
newValue       Read only       DOMString (string)  The new value of the key being changed.
url            Read only       DOMString (string)  The address of the document whose key changed.
storageArea    Read only       Storage              The Storage object that was affected.

无论是LocalStorage 、sessionStorage 还是cookie 都有各自的优劣，下表我们来列举一下他们的对比情况。

特性	Cookie	localStorage	sessionStorage
数据的生命期	一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效	除非被清除，否则永久保存	仅在当前会话下有效，关闭页面或浏览器后被清除
存放数据大小	4K左右	一般为5MB
与服务器端通信	每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题	仅在客户端（即浏览器）中保存，不参与和服务器的通信
易用性	需要程序员自己封装，源生的Cookie接口不友好	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

当然还有以下情况：

1. cookie由服务端生成，用于标识用户身份；而两个storage用于浏览器端缓存数据

2. 三者都是键值对的集

3. cookie的话，会随http请求一起发送到服务器；而两个storage可以由脚本选择性的提交

4. 会话的storage会在会话结束后销毁；而localStorage会一直存在直到手动销毁。cookie会在过期时间之后销毁。

5. 安全性方面，cookie中一般不建议存储敏感信息。两个storage的数据提交后在服务端一定要校验（其实任何payload和qs里的参数都要校验）。

目前，对于LocalStorage的介绍大概就到此为止了，可能有某些错误的地方，也可能有些不准确的地方，欢迎各位指出斧正。