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

最新推荐文章于 2024-09-24 08:10:00 发布

鹅

最新推荐文章于 2024-09-24 08:10:00 发布

阅读量4.7k

点赞数

分类专栏： web前端

web前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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

 
    1/**
 
    2 * @ NAME: Cross-browser TextStorage
 
    3 * @ DESC: text storage solution for your pages
 
    4 * @ COPY: sofish, http://sofish.de
 
    5 */
 
    6 
 
    7typeof window.localStorage == 'undefined' && ~function(){
 
    8 
 
    9    var localStorage = window.localStorage = {},
 
    10        prefix = 'data-userdata',
 
    11        doc = document,
 
    12        attrSrc = doc.body,
 
    13        html = doc.documentElement,
 
    14         
 
    15        // save attributeNames to <html>'s
 
    16        // data-userdata attribute
 
    17        mark = function(key, isRemove, temp, reg){
 
    18         
 
    19            html.load(prefix);
 
    20            temp = html.getAttribute(prefix);
 
    21            reg = RegExp('\\b' + key + '\\b,?', 'i');
 
    22             
 
    23            hasKey = reg.test(temp) ? 1 : 0;
 
    24                 
 
    25            temp = isRemove ? temp.replace(reg, '').replace(',', '') : 
 
    26                    hasKey ? temp : temp === '' ? key :
 
    27                        temp.split(',').concat(key).join(',');
 
    28                     
 
    29         
 
    30            html.setAttribute(prefix, temp);
 
    31            html.save(prefix);
 
    32 
 
    33        };
 
    34         
 
    35    // add IE behavior support
 
    36    attrSrc.addBehavior('#default#userData');
 
    37    html.addBehavior('#default#userData');
 
    38         
 
    39    //  
 
    40    localStorage.getItem = function(key){
 
    41        attrSrc.load(key);
 
    42        return attrSrc.getAttribute(key);
 
    43    };
 
    44     
 
    45    localStorage.setItem = function(key, value){
 
    46        attrSrc.setAttribute(key, value);
 
    47        attrSrc.save(key);
 
    48        mark(key);
 
    49    };
 
    50     
 
    51    localStorage.removeItem = function(key){
 
    52        attrSrc.removeAttribute(key);
 
    53        attrSrc.save(key);
 
    54        mark(key, 1);
 
    55    };
 
    56     
 
    57    // clear all attributes on <body> that using for textStorage 
 
    58    // and clearing them from the 'data-userdata' attribute's value of <html>
 
    59    localStorage.clear = function(){
 
    60     
 
    61        html.load(prefix);
 
    62     
 
    63        var attrs = html.getAttribute(prefix).split(','),
 
    64            len = attrs.length;
 
    65             
 
    66        for(var i=0;i<len;i++){
 
    67            attrSrc.removeAttribute(attrs[i]);
 
    68            attrSrc.save(attrs[i]);
 
    69        };
 
    70         
 
    71        html.setAttribute(prefix,'');
 
    72        html.save(prefix);
 
    73         
 
    74    };
 
    75               
 
    76}();

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