如何在 ie6 中使用 "localStorage"

好吧，我只是个标题党，ie6 下根本无法使用跟 h5 沾边的 localStorage。今天要向大家介绍的是 ie 特有的 userData 的存储方式，并且对它进行封装，使得不支持 localStorage 的浏览器能像使用 localStorage 一样使用 userData。

userData

在 IE5.0 中，微软通过一个自定义行为引入了持久化用户数据的概念。用户数据允许每个文档最多 128KB 数据，每个域名最多 1MB 数据。要使用持久化用户数据，首先必须如下所示，使用 CSS 在某个元素上指定 userData 行为：

<div style='behavior:url(#default#userData)' id='dataStore'></div>

一旦元素使用了 userData 行为，那么就可以使用 setAttribute() 方法在上面保存数据了。为了将数据提交到浏览器缓存中，还必须调用 save() 方法并告诉它要保存到的数据空间的名字（任意取）：

var dataStore = document.getElementById('dataStore');
dataStore.setAttribute('name', 'zichi');
dataStore.save('personInfo');

下次页面载入之后，可以使用 load() 方法指定同样的数据空间名称来获取数据：

var dataStore = document.getElementById('dataStore');
dataStore.load('personInfo');
alert(dataStore.getAttribute('name'));

对 load() 的调用获取了 personInfo 数据空间的所有信息，并且使数据可以通过元素访问。只有在载入确切完成之后数据才能使用。如果 getAttribute() 调用了不存在的名称或者是尚未载入的名称，则返回 null。

我们可以通过 removeAttribute() 方法删除某元素数据，删除之后用 save() 来提交更改：

dataStore.removeAttribute('name');
dataStore.save('personInfo');

与 localStorage 不同的是，userData 有个 expires 属性，顾名思义能设置过期时间。

var dataStore = document.getElementById('dataStore');
dataStore.setAttribute('name', 'zichi');

var expires = new Date();
expires.setSeconds(expires.getSeconds() + 1);  // 设置为 1 秒后过期
dataStore.expires = expires.toUTCString();
dataStore.save('personInfo');

// 2 秒后查看结果
setTimeout(function() {
  var dataStore = document.getElementById('dataStore');
  dataStore.load('personInfo');  // 如果不 load 会 alert 'zichi'
  alert(dataStore.getAttribute('name'));  // null
}, 2000);

userData 封装

一般的客户端存储，如果支持 localStorage 的话会优先使用 localStorage，碰到一些低版本的 ie 则会使用 userData，需要根据浏览器进行判断选择，如果能把 userData 的 api 封装成 localStorage 的 api 就方便多了。

localStorage 一般使用较多的 api 有 setItem()、getItem()、romoveItem() 以及 clear()。我们把 userData 的使用方式也封装成这些 api。主要思路是把 key-value 键值对都绑在 body 标签中，每个键值对采用一个数据空间存储，数据空间的名字也用 key 值。另外为了照顾 clear() api，还需要把每个 key 值的信息存到另外一个元素标签中，这里用了 html 标签进行存储。（因为用了 body 和 html 标签做宿主，所以以下的 js 需引入在 body 元素后，千万不能引入在 head 中）

!window.localStorage && function() {
  window.localStorage = {};
  var prefix = 'data-userdata' 
    , body = document.body
    , html = document.documentElement
    , mark = function(key, isRomove) {  // key 值字符串
    try {
      html.load(prefix);
      var tmp = html.getAttribute(prefix);
      tmp = !tmp ? '' : tmp;
    } catch(e) {
      tmp = '';
    }

    var reg = tmp.indexOf(key) === 0 ? new RegExp('\\b' + key + '\\b,?', 'i') : new RegExp(',?\\b' + key + '\\b', 'i')
      , hasKey = reg.test(tmp) ? true : falocalStoragee;

    tmp = isRomove ? tmp.replace(reg, '') : hasKey ? tmp : tmp === '' ? key : tmp.split(',').concat(key).join(',');
    html.setAttribute(prefix, tmp);
    html.save(prefix);
  };

  body.addBehavior('#default#userData');
  html.addBehavior('#default#userData');

  // getItem()
  localStorage.getItem = function(key) {
    try {
      body.load(key);
      return body.getAttribute(key);
    } catch(e) {
      return null;
    }
  };

  // setItem()
  localStorage.setItem = function(key, value) {
    body.setAttribute(key, value);
    body.save(key);
    mark(key, false);
  };

  // removeItem
  localStorage.removeItem = function(key) {
    body.removeAttribute(key);
    body.save(key);
    mark(key, true);
  };

  // clear()
  localStorage.clear = function() {
    try {
      html.load(prefix);
      var attrs = html.getAttribute(prefix).split(',')
        , len = attrs.length;

      for (var i = 0; i < len; i++) {
        body.removeAttribute(attrs[i]);
        body.save(attrs[i]);
      }

      html.setAttribute(prefix, '');
      html.save(prefix);
    } catch(e) {

    }
  };
}();