用userdata和localstorage做跨浏览器本地储存
为网站做一个搜索历史本地储存,想法是对于ie外的浏览器可以直接使用localstorage,但是对于不争气的IE,难道只能使用cookies? 然后搜到hacker news上的一篇文章。 Store.js – cross browser local storage without using cookies or flash (github.com)
http://github.com/marcuswestin/store.js
于是才知道IE下的userData。
1.浏览器支持 userData是微软为IE在系统中开辟的存储空间。因此只支持windows+IE。意外的是从IE5.5就已经开始userData了。
2.保存位置 在XP下,一般位于C:\Documents and Settings\用户名\UserData,有些时候会在C:\Documents and Settings\用户名\Application Data\Microsoft\Internet Explorer\UserData。 在Vista下,位于C:\Users\用户名\AppData\Roaming\Microsoft\Internet Explorer\UserData。 userData的保存形式为XML文件。下面是支付宝保存的userData数值。 alipayuserdata[1].xml>>
3.大小限制 Security Zone Document Limit (KB) Domain Limit (KB) Local Machine 128 1024 Intranet 512 10240 Trusted Sites 128 1024 Internet 128 1024 Restricted 64 640 线上使用时,单个文件大小限制为128KB,一个域名下文件大小限制为1024KB,文件数应该没有限制。在受限站点里这两个值分别是64KB和640KB,所以如果考虑到各种情况的话,单个文件最好能控制64KB以下。
4.使用 userData可以绑定到,几乎所有标签上。 官方文档还加了说明: Setting the userData behavior class on the html, head, title, or style object causes an error when the save or load method is called.
apply to: A, ABBR, ACRONYM, ADDRESS, AREA, B, BIG, BLOCKQUOTE, BUTTON, CAPTION, CENTER, CITE, CODE, DD, DEL, DFN, DIR, DIV, DL, DT, EM, FONT, FORM, hn, HR, I, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=hidden, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, KBD, LABEL, LI, LISTING, MAP, MARQUEE, MENU, OBJECT, OL, OPTION, P, PLAINTEXT, PRE, Q, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TEXTAREA, TT, U, UL, VAR, XMP
可以使用style方式也可以用js来创建支持userData的对象。 html方式
js创建 o=document.createElement(‘input’); o.type=’hidden’; o.addBehavior(‘#default#userData’); //等同于 o.style.behavior=”url(‘#default#userData’)”; document.body.appendChild(o);
userData提供了以下属性和方法
属性 expires 设置或者读取过期时间 XMLDocument 读取文件的XML DOM
方法 getAttribute 读取指定属性的值 load 打开文件 removeAttribute 删除指定的属性 save 保存文件 setAttribute 为指定属性赋值
5.目录限制 localStorage不能跨域访问,而userData更加严格,不能跨目录访问。 如:
http://example.com/path1
只能是http://example.com/path1/example.php目录下网页文件才可访问 。 而http://example.com/path1/path2目录下所有文件是访问不到path1保存的数据的。
cookie通过设定domain可以跨子域访问。
既然这样,为什么不用cookie来做本地储存? 1.容量小,约4KB 2.cookie可能被禁用 3.cookie不够安全 4.每次cookie都被发送到服务端,增加带宽。这和我们做本地储存的目的不符。 4.javascript被禁用的情况
6.封装 不想再自己写了,下面是来自sofish.de的代码
/** * @ NAME: Cross-browser TextStorage * @ DESC: text storage solution for your pages * @ COPY: sofish, http://sofish.de */
typeof window.localStorage == ‘undefined’ && ~function(){
var localStorage = window.localStorage = {}, prefix = ‘data-userdata’, doc = document, attrSrc = doc.body, html = doc.documentElement,
// save attributeNames to ‘s // data-userdata attribute mark = function(key, isRemove, temp, reg){
html.load(prefix); temp = html.getAttribute(prefix); reg = RegExp(‘\\b’ + key + ‘\\b,?’, ‘i’);
hasKey = reg.test(temp) ? 1 : 0;
temp = isRemove ? temp.replace(reg, ”).replace(‘,’, ”) : hasKey ? temp : temp === ” ? key : temp.split(‘,’).concat(key).join(‘,’);
html.setAttribute(prefix, temp); html.save(prefix);
};
// add IE behavior support attrSrc.addBehavior(‘#default#userData’); html.addBehavior(‘#default#userData’);
// localStorage.getItem = function(key){ attrSrc.load(key); return attrSrc.getAttribute(key); };
localStorage.setItem = function(key, value){ attrSrc.setAttribute(key, value); attrSrc.save(key); mark(key); };
localStorage.removeItem = function(key){ attrSrc.removeAttribute(key); attrSrc.save(key); mark(key, 1); };
// clear all attributes on that using for textStorage // and clearing them from the ‘data-userdata’ attribute’s value of localStorage.clear = function(){
html.load(prefix);
var attrs = html.getAttribute(prefix).split(‘,’), len = attrs.length;
for(var i=0;i attrSrc.removeAttribute(attrs[i]); attrSrc.save(attrs[i]); };
html.setAttribute(prefix,”); html.save(prefix);
};
}();
7.可用的框架 (1)store.js store.js是轻量的JS框架。 用store.set(‘key’,’value’)和store.get(‘key’,’value’)基本满足了需求。如果是以json形式储存和解 析的话,要使用json.js来使IE支持json对象。除了原生的javascript还可以找到jQuery版本的store.js (2)其他 USTORE.js https://github.com/hugeinc/USTORE.js Box.js https://github.com/kbjr/Box.js
8.参考
http://news.ycombinator.com/item?id=1468802
http://msdn.microsoft.com/en-us/library/ms531424%28v=VS.85%29.aspx
http://www.cnblogs.com/QLeelulu/archive/2008/03/29/1129322.html
http://sofish.de/1872
至于localStorage就不说了。
原文:http://mao.li/cross-browser-local-storage-with-userdata-and-localstorage/
本文出自 传播、沟通、分享,转载时请注明出处及相应链接。
本文永久链接: https://www.nickdd.cn/?p=1828