HTML5 localStorage在现代浏览器中广泛支持，IE6/7需降级为userData behavior：通过CSS绑定隐藏div、load/save显式操作、JSON序列化、处理路径隔离与UTF-8编码，最终封装统一接口并fallback至内存存储。
HTML5 的 localStorage 在 IE8+、Firefox 3.5+、Chrome 4+ 等现代浏览器中已广泛支持，但对 IE6/IE7 这类旧版浏览器需降级处理。最成熟、兼容性最好的方案是利用 IE 特有的 userData behavior —— 它是微软在 IE5.5 引入的专有持久化存储机制，可稳定支持到 IE7，且无需 ActiveX 启用（区别于 ActiveXObject("ADODB.Recordset") 等方案）。
userData behavior 基本原理与启用方式
userData 是一种 CSS behavior，通过附加到任意元素（通常为隐藏的 <div>）上，使该元素具备本地持久化能力。数据以 XML 格式保存在用户配置目录中，单个域下默认上限 128KB，可通过注册表调整。
<ul>
<li>需在页面中定义一个带 ID 的元素（如 <code><div id="storageEl"></div>），并用 CSS 绑定 behavior：#storageEl { behavior: url(#default#userData); }
load() 和 save() 方法显式读写；不自动同步，也不触发事件封装统一的 storage 接口（兼容 localStorage）
为保持代码一致性，建议封装一个类，对外提供 setItem(key, value)、getItem(key)、removeItem(key)、clear() 等方法，内部根据环境自动选择后端：
- 优先检测
window.localStorage是否可用（包括 try-catch 防止隐私模式报错） - 不可用时尝试创建 userData 元素并调用
load()验证是否就绪（IE6/7 可能因安全策略禁用，需兜底到内存对象） - userData 中所有键值需序列化为字符串（推荐
JSON.stringify()），读取时反序列化；注意 IE7 不支持原生JSON，需引入 json2.js
关键细节与常见陷阱
userData 行为看似简单，但实际使用中易出问题：
立即学习“前端免费学习笔记（深入）”；
-
路径作用域限制：userData 按完整 URL 路径隔离（含查询参数），
example.com/a.html与example.com/b.html无法共享；建议统一用根路径（document.documentElement.setAttribute("UserDataPath", "/");）或确保调用页路径一致 -
save() 必须指定范围：调用
element.save("storageName")时，名称必须与之前load("storageName")一致，否则读不到数据 -
UTF-8 编码问题：userData 默认按系统编码（如 GBK）保存，中文可能乱码；应在设置前调用
element.setAttribute("charset", "UTF-8")，并在 save 前确保 DOM 元素内容为 UTF-8 字符串 - 无过期机制：userData 不支持 TTL，需自行在值中存时间戳，读取时判断并手动清理
轻量级 polyfill 示例（仅核心逻辑）
以下为最小可行封装示意（省略错误处理和 IE6 兼容补丁）：
var storage = (function() {
if (typeof localStorage !== 'undefined') {
return localStorage;
}
var el = document.createElement('div');
el.style.display = 'none';
document.body.appendChild(el);
try {
el.addBehavior('#default#userData');
el.load('storage');
return {
setItem: function(k, v) {
el.setAttribute(k, JSON.stringify(v));
el.save('storage');
},
getItem: function(k) {
var v = el.getAttribute(k);
return v ? JSON.parse(v) : null;
},
removeItem: function(k) {
el.removeAttribute(k);
el.save('storage');
},
clear: function() {
el.innerHTML = '';
el.save('storage');
}
};
} catch(e) {
// 降级为内存存储（页面生命周期内有效）
var mem = {};
return {
setItem: function(k, v) { mem[k] = v; },
getItem: function(k) { return mem[k]; },
removeItem: function(k) { delete mem[k]; },
clear: function() { mem = {}; }
};
}
})();
