Web存储之LocalStorage初探

2016-07-06 00:31:00

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。

Storage.length 只读

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

Storage.key()

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

Storage.getItem()

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

Storage.setItem()

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

Storage.removeItem()

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

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有更好的支持

当然还有以下情况：