用userdata和localstorage做跨浏览器本地储存

作者: nick 分类: html5, js 发布时间: 2011-12-16 06:01 ė 6没有评论

为网站做一个搜索历史本地储存,想法是对于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/

本文出自 传播、沟通、分享,转载时请注明出处及相应链接。

本文永久链接: http://www.db.run/?p=1828

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Ɣ回顶部