这两天看了下Discuz x2发帖的实时保存机制,涉及到本地化存储,所以上网查了下,Firefox等支持HTML5的浏览器使用window.localStorage或window.sessionStorage存储,比较简单,所以我特别关注了一下IE下的本地化存储,以下是在网上查找的资料,作为笔记。
在Internet Explorer 5中,Microsoft提供了名为userData的客户端持久存储功能。它是通过对CSS行为进行特殊扩展来实现的。这些扩展完全都是非标准的,是 90年代后期浏览器大战遗留下来的产物。由于它概念模糊、使用困难,并且只能用于Internet Explorer,所以很少有Web开发人员会使用这种存储方式,大多数的开发人员甚至完全不知道存在这种技术。
IE的userData能 够存储完整的XML文档,并且会将复杂的数据类型转换为XML存储起来。通过这种方 式,数据会被插入到XML数据岛(另一项只有IE中才存在的功能)中。然后整个XML数据岛再被存入userData中。不过,像 Dojo.Storage这样的存储框架屏蔽了userData中的这些XML功能,通常只将名/值对以字符串的形式暴露出去。
在某些情况 下,userData可以比其他存储方式存储更多的数据。Internet Explorer中不仅对每页数据的大小作出了限制,同时也对整个域的大小进行了限制。如果试图存储的数据容量超过了允许的大小,就会导致 JavaScript抛出一个异常。表8-2显示了Internet Explorer不同安全域中userData的存储能力。
表 Internet Explorer不同安全区域中的userData存储能力
安 全 区 域 | 域大小限制 | 页大小限制 |
Intranet | 512KB | 10MB |
本机、可信任区域及Internet | 128KB | 1MB |
受限制区域 | 64KB | 640KB |
表中两个关系最紧密的域就是Internet和 Intranet。对于互联网上的普通网站来说,IE本身允许的存储容量要大于Flash的LSO,但是小于Mozilla的DOM存储。而对于 Intranet中的应用程序来说,userData的存储能力远远超过其他存储方式,10MB的存储容量可以存储下整个数据表、树型结构及其他体积更大 的数据结构。开发人员必须记住,userData是一种持久化存储方式,而不是驻留在内存中,因此关闭浏览器并不会删除这些数据。当使用userData 存储体积较大的数据结构时,开发人员需要格外小心。因为这些数据结构中可能会存有身份认证这样的敏感数据,如果被持久保存在客户端很可能被攻击者所利用。
由于名/值对是作为XML节点的属性存储在userData的XML文档中,因此Internet Explorer可以自动将某些特殊字符转义为XML中的对应字符。例如,双引号(”)会被替换为",而连字符(&)会被替换 为&。由于这些自动转义的字符会增加实际存储的数据大小,因此开发人员必须确保有足够的空间来存储转义后的数据。
使用 userData将会使数据共享受到极大的限制。不同域、甚至同一域下的不同子域之间都不能共享数据。此 外,同一主机不同端口上的应用程序之间也无法共享数据。我们只能在同域同目录下的不同页面之间共享数据。例如,http://company.com /Storage/ Checkout.html可以访问http://company.com/Storage/ UserData.html,以及任何/Storage/目录下网页所存储的数据。如果试图从其他页面访问,仅会返回一个null。这些默认的限制是无法 改变的,并且几乎与cookie的默认规则恰恰相反。这也使得userData成为了Internet Explore 5中少数几个较为安全的功能之一。
我们无法通过编程手段来删除掉存储在userData中的所有数据,只能对使用.userData样式的 HTML元素调用其removeAttribute()方法,来删除相应的名/值对。但是,我们无法遍历删除userData中实际存储的名/值对。虽然 开发人员应该知道存储在客户端的所有名/值对,但是,我们毕竟都是人,总会忘记一些事情,并且由于我们无法像为DOM存储编写一个clear()方法那 样,所以那些应该被删除的数据很可能被遗留在userData中。幸好,userData元素的expires属性可以提供一些帮助,开发人员可以通过它 来设置自动删除数据的过期时间。在默认情况下,存储在userData中的所有数据永远都不会过期。Interner Explorer不仅无法提供网站使用userData存储数据的时间,也没有提供任何关于userData的可视化界面,即使删除浏览器中的 cookie、缓存、历史记录和离线内容,也无法删除userDat中存储的数据。这些因素都增加了窃取客户端机器中数据的可能性。一旦确保不再需要使用 应用程序中的某些数据,开发人员就应该立即将它们删除掉。
要查看userData中存储的数据不是不可行,但需要一些技巧。首先,在 Windows Explorer(随便打开一个Windows文件窗口)的文件夹选项中切换到“查看”选项卡,勾选“显示所有文件和文件夹”复选框,并取消选择“隐藏受 保护的操作系统文件(推荐)”选项。然后我们打开userData目录,在Windows XP系统中即为C:\Documents and Settings\USER_NAME\UserData。虽然userData都存储在XML文件中,但是Internet Exploerer使用缓存的存储机制来存储这些XML。例如,用一个名为index.dat的索引文件来存储所有的元数据(Metadata),然后将 其中的元素(即不同域用来存储userData的XML)分别存储在5个随机生成的目录下。我们可以通过查看index.dat索引文件,以及目录中的所 有XML文件,来确定具体使用的userData存储系统。
不过,要想修改userData中存储的内容却是非常复杂的,因为我们无法直 接修改缓存目录中的XML文件。 如果真这么做,那么JavaScript在加载修改后的数据时,会抛出一个数据格式错误的异常。这意味着在index.dat文件中保存了某些哈希散列 值,或者XML文件的长度。不幸的是,index.dat不是一种开放的文件格式。在互联网上,只有很少一些网站详细描述了该文件结构的内部结构。我们 (本书作者)经过一晚上大量的尝试和失败,终于发现XML文件的长度的确存储在index.dat文件中。注意,index.dat里 的+0x20偏移量就用来保存文件的长度,当前值为136字节,也正是我们用来存储持久化userData的XML文件的长度。
于是,现在攻击者可以任意修改userData中存储的持久化数据,只要最后更新index.dat文件中的 XML文件长度即可。
我们再一次重申,任何形式的客户端存储都可以被用户查看并修改。开发人员永远都不能相信任何来自客户端的数据。
总结
· userData提供了持久化存储功能。如果要模拟非持久化存储,开发人员可以使用浏览器的unload()方法来清除userData数据。
· 可以指定userData是否自动过期。在默认情况下,userData中的数据永远不会过期。
· 只有满足以下3个条件,页面之间才能共享userData数据:同一端口、同一服务器、同一目录下。必须遵守该规定,并且域和域之间也无法共享数据。
· userData可以存储XML或者字符串数据。开发人员必须将复杂的数据类型进行序列化,转化为这两种格式,并实现相应的反序列化功能。
· 通过文本编辑器就可以查看userData中的数据,而修改其中的数据需要十六进制编辑器。
程序代码封装:
/** @class 定义userdata的操作 */
var UserData = {
// 定义userdata对象
o : null,
// 设置文件过期时间 单位:天
defExps : 365,
// 初始化userdate对象
init : function(){
if(!UserData.o){
try{
UserData.o = document.createElement('input');
UserData.o.type = "hidden";
//UserData.o.style.behavior = "url('#default#userData')" ;
UserData.o.addBehavior ("#default#userData");
document.body.appendChild(UserData.o);
}catch(e){
return false;
}
};
return true;
},
// 保存文件到userdata文件夹中 f-文件名,c-文件内容,e-过期时间
save : function(f, c, e){
try{
if(UserData.init()){
var o = UserData.o;
// 保持对象的一致
o.load(f);
// 将传入的内容当作属性存储
if(c) o.setAttribute("code", c);
// 设置文件过期时间
var d = new Date(), e = (arguments.length == 3) ? e : UserData.defExps;
d.setDate(d.getDate()+e);
o.expires = d.toUTCString();
// 存储为制定的文件名
o.save(f);
}
}catch (ex){}
},
// 从uerdata文件夹中读取指定文件,并以字符串形式返回。f-文件名
load : function(f){
if(UserData.init()){
try{
var o = UserData.o;
// 读取文件
o.load(f);
// 返回文件内容
return o.getAttribute("code");
}catch (ex){
return null;
}
}
},
// 检查userdata文件是否存在 f-文件名
exist : function(f){
return UserData.load(f) != null;
},
// 删除userdata文件夹中的指定文件 f-文件名
remove : function(f){
UserData.save(f, false, -UserData.defExps);
}
// UserData函数定义结束
};
//调用方式
UserData.save(fileName,"存储内容");
var "存储内容"=UserData.load(fileName);
分享到:
相关推荐
提供LocalStorage的本地化存储方案,支持IE(通过IE特性userData)。 注意:IE6 IE7等是通过userData来持久化存储数据的,不支持复杂对象的存储,例如Array、Object等,如果有此需求,请转为JSON后再进行存储。 如何...
LocalStorage的设计目的是持久化存储,这意味着即使用户关闭浏览器或计算机,存储的数据也不会丢失。它以键值对的形式存储数据,非常方便于存储结构化的数据。 使用LocalStorage的方法很简单,通过`window....
`initDom`方法用于初始化`userData`,`set`、`get`和`remove`方法分别对应设置、获取和移除本地存储的数据。 通过这样的封装,开发者可以方便地在不同的浏览器环境中使用本地存储功能,而无需关心底层实现的差异。...
在HTML5之前,开发者在客户端存储数据时面临多种选择,如HTTP Cookie、IE的userData、Flash Cookie以及Google Gears,但这些方法都有其局限性,如存储容量小、兼容性差或依赖特定技术。 本地存储的主要优点在于它能...
这个改版的 JS 脚本为开发者提供了一种跨浏览器的解决方案,可以在不同浏览器环境下实现类似的功能,即在用户本地存储数据。对于需要在用户多次访问之间保持状态的应用场景,如购物车、用户设置等,这种机制非常有用...
在探讨Web数据存储的过程中,我们需要了解不同的...WebSqlDatabase则适用于需要大量结构化数据持久化存储的场景,如需要本地运行的复杂Web应用。开发者在选择存储方案时,需要根据实际需求来权衡各种存储技术的利弊。
由于IE浏览器的市场份额,store.js也提供了对userData的兼容,确保在IE环境下也能正常工作。userData使用XMLHttpRequest来同步数据,这种方式相比localStorage和globalStorage较为繁琐,但store.js通过抽象出统一的...
例如,使用`userData`在IE中存储的数据,可能无法在其他浏览器(如Chrome)中读取,因为它们不支持`userData`行为。这就需要开发者在设计时考虑多浏览器的兼容性和数据迁移策略,可能需要借助服务器端的配合来解决跨...
总的来说,`localStorage`是现代Web应用中用于本地数据持久化存储的重要工具,它在优化用户体验、提高应用性能方面发挥了重要作用,但同时也需注意其存在的局限性和使用场景。在实际开发中,应根据项目需求和目标...
例如,通过使用IE提供的userData特性,可以在IE5.0及以上版本中实现每项数据最多128KB的持久化存储,每个域名下总共可达1MB。 #### 浏览器本地存储:WebStorage 随着网络应用功能日益复杂,传统的Cookie已经无法...
此外,虽然Internet Explorer提供了UserData这种存储方式,但它的兼容性和容量限制(64KB)同样制约了其广泛使用。鉴于这些问题,HTML5提出了多种更为强大的客户端存储解决方案。 #### 二、HTML5存储方式的目标 ...
LocalStorage的引入旨在统一各种浏览器间的本地数据存储方式,如IE的userData、Flash对象等。它提供了一个易于使用的API,使得开发者可以方便地进行数据的读取、写入和删除操作。 在HTML5中,LocalStorage通过...
sessionStorage用于会话级别的存储,而localStorage则提供持久化的本地存储,容量比Cookie大得多。两者与Cookie的主要区别在于,Web Storage不随HTTP请求发送,节省了带宽,但它们不涉及服务器交互,仅用于本地数据...
因此,sessionStorage并不适合用于持久化存储,只适用于临时保存页面状态或用户在会话期间的数据。 2. localStorage:与sessionStorage相比,localStorage提供了永久性的本地存储功能。一旦数据被存储在...
在现代Web开发中,JavaScript在客户端的应用越来越广泛,为了实现数据持久化存储,浏览器提供了Local Storage机制。然而,不同浏览器对Local Storage的支持程度和使用方式略有差异。为了解决这个问题,`store.js` ...
因此,`sessionStorage` 不是一种持久化存储方式。 - **localStorage** 则用于长期存储数据。除非主动删除数据,否则数据将永久保留在本地,即使关闭浏览器或重启计算机也不会丢失。 #### WebStorage与Cookie的区别...
本地存储机制通常指的是userData或者localStorage,这是Web Storage的一部分,可以用于在用户的浏览器中保存键值对数据。 插件的设计原理很简单:通过读取表单中元素的当前状态(如输入框的值、复选框的选择状态等...