in javascript

localStorage in HTML5(1)

HTML5 中的 localStorage 我相信 web developer 们,都听说过了吧。目前 chrome,firefox,opera,safari, IE8 都支持此属性,注意 IE8 也支持,那就是说,如果你的网站用户不是太低端,起码有一半以上的用户的浏览器是支持 localStorage 特性的。各个浏览器分配给每个“源(region)”的 localStorage 空间至少为 5M(具体数值请看稍后讨论),对于想开始使用 HTML5 的人们来说,这个是个不错的开始。

localStorage 使用方式也非常简单,有 setItem, getItem, removeItem,key, clear 5个方法,和 length 一个属性。定义如下:

interface Storage {
  readonly attribute unsigned long length;
  DOMString key(in unsigned long index);
  getter any getItem(in DOMString key);
  setter creator void setItem(in DOMString key, in any value);
  deleter void removeItem(in DOMString key);
  void clear();
};

localStorage 中都是以 key/value 的形式来存储数据的,存储的数据类型都是字符串,如果需要其他类型,需要自行转换。我们可以使用 setItem 方法来存储数据,例如 localStorage.setItem(‘foo’,’test data’); 这样来存储一个 key 为 foo 的数据,然后可以使用 getItem 来读取 value 值,即 localStorage.getItem(‘foo’); 如果 setItem 的时候,key 已经存在,则修改保存的数据为最新的数据,如果不存在,则新建 key。执行 removeItem() 可以删除已经存储的数据,比如localStorage.removeItem(‘foo’) 可以删除 key 为 foo 的数据。执行 clear() 会清除此“源”下的所有数据。key() 方法可以获取第 n 个数据的 key 值,例如 localStorage.key(0) 可以获取到第 0 个 key/value 对 的 key 值。这个配合 length 属性可以遍历出所有存储的值。length 属性返回已经存储的数据的条数。

上面简单的介绍了下 localStorage 的用法,然后我们来讨论各个浏览器分配了多少空间给 localStorage。

在各个浏览器中,只有 opera 可以清楚的看到用了多少空间,当这个容量到达 5M 的时候,浏览器就会提示用户是否增加容量,如果用户点击了拒绝,那此后就不会再提示,如果不删除这些数据,将不能再存储,抛出错误。如果用户点击了允许,那将获得以前两倍的空间,等到达了新的上限后,又会弹出提示,以 5M -> 10M -> 20M -> 40M 这样递增。

另外 IE8 的 localStorage 对象,有个 remainingSpace 的属性,可以查看剩余的可用空间,在 IE 中执行 alert(localStorage.remainingSpace) 可以看到 IE8 有5M 的最大存储空间。如果达到最大值,会抛出错误,不清除数据前将不能继续存储。

其他浏览器我还没找到办法查看最大容量,但是我用同样的脚本在不同的浏览器里跑,等到达最大值后,查看存储的键值对的数量,结果如下:opera 可以存储 1482 条记录,chrome 和 safari 可以存储1986条,MAC下的 firefox 3.6  可以存储3970条,IE8 下可以存储 3786条。WIN 下的 firefox 3.6 一直没得到结果,一直没有抛出错误,好像是无限的一样。(以上浏览器都是使用的截止到今天的最新的正式版)。 win 下的 firefox 3.6 的问题还有待验证,我使用的环境是虚拟机下的 windows7 系统。

从 IE8 的 remainingSpace 属性可以看出默认最大容量也是 5M ,和 opear 相同,但是存储的条目数量却相差很大,猜测可能是使用了压缩算法,因为存储的都是字符串,压缩率还是非常可观的。chrome 和 safari 具体的最大容量,从这里也没办法推断出来,不过既然 opera 存储的条目数最少,那我们就认为至少可以存储 5M 的数据吧。

有了 5M 这个数量,我们就可以判断哪些数据适合用这个来存储,哪些不适合。毕竟现在如果存储满了后,还没有什么好办法来清除一些不再使用的数据,因为我们从代码里不容易判断哪些是用户很少用到的。最好使用这个 feature 来实现一些用户体验加强的东西,而不是来实现关键性的东西。

另外在 IE8 以下的版本,我们可以使用其他技术来代替,比如 IE 特有的 userData,或者 flash store 。可以考虑封装一下,暴露出统一的接口给用户( developer)使用。

  1. Pingback: 手把手教你开发Chrome扩展三:关于本地存储数据 » NoName

  2. Pingback: Hold Your Dream » 手把手教你开发Chrome扩展三:关于本地存储数据

  3. Pingback: 手把手教开发chrome扩展 | liuli

  4. Pingback: 手把手教你开发Chrome扩展三:关于本地存储数据 | 翱翔 Beta

  5. 2571是因为在保存的时候使用unicode编码,这样一个字符就占两个字节,因此相对字符数,容量就减少了一版