localStorage in HTML5(2)

上一篇博客简单的介绍了下 localStorage,并且对各个浏览器的存储空间大小做了简单的测试。在上篇博客到这篇博客期间,世界也发生了很多变化,IE9 和 firefox4 正式版都发布了。于是我也对这两个新的浏览器进行了测试,关于 localStorage 的, IE9 和 IE8 表现一致,FF4 和 FF3.6 表现一致,和上篇博客中介绍的一样,FF4 在 Mac 下和 WIN 下表现仍然不一致,参考上篇博客。同时,给出我写的测试存储空间大小的页面,你可以自己来试试:http://lab.allenm.me/html5/storage/maxtest.html

除了最基本的和使用 cookie 一样使用 localStorage,我们还能用它来做什么呢?

如果你看过 localStorage 的文档,你应该注意到了我们在改变 localStorage 中存储的数据的时候,会触发一个 storage 事件:

interface StorageEvent : Event {
  readonly attribute DOMString key;
  readonly attribute any oldValue;
  readonly attribute any newValue;
  readonly attribute DOMString url;
  readonly attribute Storage storageArea;
  void initStorageEvent(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in DOMString keyArg, in any oldValueArg, in any newValueArg, in DOMString urlArg, in Storage storageAreaArg);
};

 

既然我们可以知道此“源”下的localStorage 中的某个字段的值发生了变化,那我们就可以在前端做到跨页面通信,这个是有意义的。 你想想看,在我们目前的WEB应用中,经常会发生这样的事情:在淘宝或者其他电商网站购物,点击购买某个物品,会在页面上购物车中显示。然后在新的 tab 页中打开其他物品的页面,也点击购买,新的页面当然会显示你购买的所有物品,但是旧的页面中的购物车却并不会主动更新这个数据。以前的技术并不是不可以实现这个,只是相对来说成本较大,没有必要。利用 localStorage ,我们就可以只使用前端技术来同步这个数据,成本极小。

我写了一个简单的利用 storage 事件来做前端层面的夸页面数据同步,请在支持 localStorage 的浏览器中打开两个此页面:http://lab.allenm.me/html5/storage/ ,然后在任意一个中输入任意字符,再看看另外一个页面中有什么变化。

我们知道 localStorage 中,我们只可以保存字符串。但是有些时候,我们需要保存一些结构比较复杂的数据,字符串不适合做这种工作,自己再制定一种特殊的规则来利用字符串保存这些数据,也是不明智的选择。因为我们已经有了 JSON 这个事实上的标准了啊。要让 localStorage 支持 JSON 的存储也比较容易,我们只需要自己再封装一层就OK了。现代浏览器已经原生支持 JSON 的解析,JSON.parse() 用来把字符串解析成 JSON 对象,JSON.stringify() 用来把 JSON 对象编码成字符串格式。有了这两个方法,我们只需要在存储的时候,编码,获取数据的时候,解码就可以实现用 JSON 来存储数据了。具体封装这里就不给出代码了。

即使有些不够现代的浏览器不支持 JSON.parse() 和 JSON.stringify() 也没关系,因为我们还有开源的 js 实现的 JSON 的解析器和编码器:老道的 JSON-js

localStorage 还有一个孪生兄弟,叫 sessionStorage,他们的用法基本一致,同属于 WEB Storage, 只是保存的数据的生命周期有区别,详情请阅读这里