如何在 ie6 中使用 localStorage - 韩子迟_H5之家 - 中国HTML5教程资源分享第一站

如何在 ie6 中使用 "localStorage"

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

userData

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

一旦元素使用了 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 标签进行存储。

!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) { } }; }();

posted on