对HTML5中LocalStorage的一些使用建议

上个月末的w3ctech上，有同行提到了LocalStorage这个话题，我以为在HTML5的众多新特性中，LocalStorage算是比较实际同时浏览器也比较好实现的特性。

LocalStorage的规范描述在这里：http://dev.w3.org/html5/webstorage/

首先一个细节，LocalStorage只能存储键值对(key-value pair)形式的数据，而且key和value都只能存储为字符串类型。之因此这样说，由于JS是动态语言，咱们能够在setItem时传入int型数据(好比localStorage.setItem("a", 1))，可是它会转换成字符串以后再进行存储和准备随时调用，当咱们用getItem访问"a"时(localStorage.getItem("a"))，获得的是字符串"1"而非数字1。

第二，虽然localStorage[key] = value的写法主流的浏览器都是支持的，但标准里并无明确的要求，因此不推荐这样书写代码。并且很显而易见的问题是：对length、setItem、getItem、clear这样的key进行读写是会产生问题的。假如咱们执行：

localStorage.setItem = null;

localStoarge.removeItem = null;

localStorage.clear = null;

那么整个LocalStorage的接口完备性将会遭到破坏。

固然，对JS比较熟悉的童鞋能够思考一个附加的变态问题，执行了上述代码以后，localStorage还有没有办法恢复正常呢？

第三，若是咱们不想存储字符串，而是类型更丰富结构更复杂的数据，咱们推荐你们和JSON的相关函数JSON.parse/JSON.stringify配合使用。这样咱们能够方便复杂数据结构和字符串之间的转换，获取数据的时候使用JSON.parse(localStorage.getItem("a"))，写入数据的时候使用localStorage.setItem("a", JSON.stringify(obj))。

第四，LocalStorage跟cookies同样是按照域名为单位进行独立存储的，且是有容量上限的(通常为5MB)，当咱们调用setItem时若是超过容量上限，会触发QuotaExceededError异常。个人经验是，若是你是存文本的，通常碰不到这根线，能够无视；若是用DataURI方式存二进制文件，就须要特别注意了，视频的话，基本没有5MB如下的，因此不会考虑LocalStorage的，也不用特别注意；但若是是图片，很容易几百K的图片多存几张就够5MB了，因此有必要提个醒。固然有些浏览器也会经过提醒用户确认来容许网站使用更多的容量，那个是另外一说了。

上述四个建议是我我的使用LocalStorage最常碰到的情况，这里分享给你们。

最后在附送一个“高阶”技巧：window.onstorage事件。其实这也不算多高级，只是用的地方比较少罢了。假如咱们同时打开了同域下的多个页面，这时我在一个页面里操做localStorage.setItem、localStorage.removeItem或localStorage.clear，其它同域的页面就会触发这个事件。事件附带的参数是这样的：

window.onstorage = function (event) {

    var key = event.key // 被修改的键名

    var oldValue = event.oldValue // 旧的值

    var newValue = event.newValue // 新的值

    var url = event.url // 触发改变的网页的url

    var storage = event.storageArea // 当前localStorage的引用(当sessionStorage改变时，这里就是当前sessionStorage的引用，好吧扯远了，看不懂能够先无视)

}

这个特性能够帮助咱们在多个页面间实现简单的通讯、同步和数据交互，好比在一个网站的用户设置页面中修改用户昵称，那么你的全部页面中的昵称也都瞬间改变了。固然，与之产生的注意事项是要回避循环修改，以避免浏览器进入死循环。

以上

其实对于LocalStorage还有不少细节，对HTML5感兴趣的童鞋能够进一步挖掘。来年的交流会上，咱们必定还会聊到LocalStorage。到那时，咱们能够再作更深刻的讨论和交流。