常用浏览器本地存储的几种方案对比

西风瘦马 发布于 一月 16, 2010

有时需要将网页中的一些数据保存在浏览器端，这样做的好处是，当下次访问页面时，不需要再次向服务器请求数据，直接就可以从本地读取数据。目前常用的有以下几种方法：

cookie

cookie会随着每次HTTP请求头信息一起发送，无形中增加了网络流量，另外，cookie能存储的数据容量有限，根据浏览器类型不同而不同，IE6大约只能存储2K。

Flash ShareObject

这种方式能能解决上面提到的cookie存储的两个弊端，而且能够跨浏览器，应该说是目前最好的本地存储方案。不过，需要在页面中插入一个Flash，当浏览器没有安装Flash控件时就不能用了。所幸的是，没有安装Flash的用户极少。

缺点：需要安装Flash插件。

Google Gear

Google开发出的一种本地存储技术。

缺点：需要安装Gear组件。

userData

IE浏览器可以使用userData来存储数据，容量可达到640K，这种方案是很可靠的，不需要安装额外的插件。缺点：它仅在IE下有效。

sessionStorage

使用于Firefox2+的火狐浏览器，用这种方式存储的数据仅窗口级别有效，同一个窗口（或者Tab）页面刷新或者跳转，都能获取到本地存储的数据，当新开窗口或者页面时，原来的数据就失效了。

缺点：IE不支持、不能实现数据的持久保存。

globalStorage

使用于Firefox2+的火狐浏览器，类似于IE的userData。

PLAIN TEXT
JAVASCRIPT:
  1. //赋值
  2. globalStorage[location.hostname]['name'] = 'tugai';
  3. //读取
  4. globalStorage[location.hostname]['name'];
  5. //删除
  6. globalStorage[location.hostname].removeItem('name');

缺点：IE不支持。

localStorage

localStorage是Web Storage互联网存储规范中的一部分，现在在Firefox 3.5、Safari 4和IE8中得到支持。

缺点：低版本浏览器不支持。

结论：
Flash shareobject是不错的选择，如果你不想在页面上嵌入Flash，可以结合使用userData(IE6+)和globalStorage(Firefox2+)和localStorage(chrome3+)实现跨浏览器。

补充：由于项目需要，简单模拟了HTML5 localStorage中的几个方法，支持firefox2+，IE5+，chrome3+，其他不详。

PLAIN TEXT
JAVASCRIPT:
  1. if (!('localStorage' in window)) {
  2.  
  3.     window.localStorage = (function() {
  4.         var documentElement, isIE = !!document.all;
  5.  
  6.         if (isIE) {
  7.             documentElement = document.documentElement;
  8.             documentElement.addBehavior('#default#userdata');
  9.         }
  10.  
  11.         return {
  12.             setItem: function(key, value) {
  13.                 if (isIE) {
  14.                     documentElement.setAttribute('value', value);
  15.                     documentElement.save(key);
  16.                 }
  17.                 else {
  18.                     window.globalStorage[location.hostname][key] = value;
  19.                 }
  20.             },
  21.             getItem: function(key) {
  22.                 if (isIE) {
  23.                     documentElement.load(key);
  24.                     return documentElement.getAttribute('value');
  25.                 }
  26.  
  27.                 return window.globalStorage[location.hostname][key];
  28.             },
  29.             removeItem: function(key) {
  30.                 if (isIE) {
  31.                     documentElement.removeAttribute('value');
  32.                     documentElement.save(key);
  33.                 }
  34.                 else {
  35.                     window.globalStorage[location.hostname].removeItem(key);
  36.                 }
  37.             }
  38.         };
  39.     })();
  40.  
  41. }
  42.  
  43. //写入
  44. localStorage.setItem('name', 'Joe');
  45. //读取
  46. localStorage.getItem('name');
  47. //删除
  48. localStorage.removeItem('name');

文章来源：西风瘦马博客http://blog.tugai.net/

一条评论

  1. 客户端存储 | 西红柿炒番茄 发布于 九月 10th, 2010

    [...] 扩展阅读：http://diveintohtml5.org/storage.html，常用浏览器本地存储的几种方案对比 JavascriptJavascript localStorage User Data 客户端存储妙用字面量对象来设计代码 你的手印呢? Name (*) [...]

发布评论