Download
1 / 25
E N D
存点东东到本地 by 哈哈小老虎
我的测试环境 OS： • winxp • win7 Browser： • IE6~9 • FF3.6.15 • Chrome 10.0.648.133 • Safari 5.0.4 • Opera 11.10 alpha
存点东东到本地 • 天降英才：客户端存储的淫乱史 • 四方朝拜：localStorage的勃起 • 文治武功：localStorage的宏图 • 负隅顽抗：userData的叫嚣 • 一国两制：让所有浏览器臣服 • 威加海内：在web中的实际应用 • 谁与争锋：本地存储 vs flash存储
客户端存储的淫乱史 在一个黑灯瞎火的晚上，W3C淫荡地推出了localStorage。。。
localStorage的勃起 革新派纷纷表示J动无B，以IE6~7为首的顽固派表示毫无性趣。。。
localStorage的宏图 使用示例 // 添加数据 localStorage.setItem('tkey', 'tvalue'); // 读取数据 localStorage.getItem('tkey'); // 移除数据 localStorage.removeItem('tkey');
localStorage的宏图 TIPS 1. 数据以明文形式存储，所以不适合保存敏感数据； 2. 当协议/主机名/端口完全相同时，才被视为同域； 3. 无法跨域共享数据； 4. 试图通过设置document.domain来跨子域，浏览器会抛出一个安全异常； 5. w3c推荐用户代理给每个域提供至少5M的存储空间。
杯具的storage事件 一. 事件注册对象不一致
杯具的storage事件 二. 事件对象属性的弱支持
userData的叫嚣 激活userData特性的方式 1. xml <prefix: customTag id="sID" style="behavior:url('#default#userData')" /> 2. html <element style="behavior:url('#default#userData')" id="sID"></element> 3. script （1）object.style.behavior = "url('#default#userData')"; （2）object.addBehavior("#default#userData");
userData的叫嚣 使用示例 // 假设oStorage为一个隐藏的input元素 oStorage.addBehavior('#default#userData'); // 添加数据 oStorage.setAttribute(‘tkey’, ‘tvalue’); oStorage.save(‘IELocalDataStore’); // 读取数据 oStorage.load(‘IELocalDataStore’); oStorage.getAttribute(‘tkey’);
userData的叫嚣 TIPS 1. userData只能在同域的同一目录中共享数据； 2. userData以明文形式保存数据，所以不适合保存敏感数据； 3. 如果用户将当前站点添加至“受限制的站点”中，或禁用掉“安全”tab下的“持续使 用用户数据”选项，都会导致userData无法使用； 4. 在html, head,title, style上激活userData后，调用其load/save方法时会报错； 5. userData可激活于大部分元素，但不是所有元素，详细见这里； 6. 即使设置document.domain，也无法跨子域共享数据。
让所有浏览器臣服 实例 -- 取得storage对象 vardoc = document, oStorage; if (typeoflocalStorage !== 'undefined') { oStorage= localStorage; } else if (ie) { oStorage= doc.createElement('input'); oStorage.type= 'hidden'; doc.body.appendChild(oStorage); oStorage.addBehavior('#default#userData'); }
让所有浏览器臣服 实例 -- 兼容的setItem if ('setItem' in oStorage) { return function(key, value) { oStorage.setItem(key, value); }; } else if (ie) { return function(key, value) { try { oStorage.setAttribute(key, value); oStorage.save('IELocalDataStore'); } catch(e) {} }; }
在web中的实际应用 • 代替cookie 说明：用本地存储记录折叠/展开的状态
在web中的实际应用 二. 提升用户体验 说明：用本地存储记录用户的购买信息。
在web中的实际应用 三. 提升用户体验 说明：用本地存储记录用户留下的评论信息。
在web中的实际应用 四. 提升页面性能 说明：使用本地存储减小文档下载量。
参考资料 • Web Storage • DOM Storage • DOM存储简介 • onstorage Event • userData Behavior
将淫荡进行到底 本周最佳淫贼：基德
