HTML 5-h5的localStorage和本地存储IE6、IE7不支持

WP主题讨论 WP主题讨论 主题:1013 回复:2239

HTML 5-h5的localStorage和本地存储IE6、IE7不支持

灵芸 发布于 2017-05-29 字数 93 浏览 1179 回复 3

h5的localStorage和本地存储,谷歌火狐都支持,但IE6跟7不支持,能否用cookie代替做成兼容?

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

支持 Markdown 语法,需要帮助?

评论(3

瑾兮 2017-10-03 3 楼

推荐使用userdata和localstorage做跨浏览器本地储存,具体方案如下:

1.浏览器支持
userData是微软为IE在系统中开辟的存储空间。因此只支持windows+IE。意外的是从IE5.5就已经开始userData了。

2.保存位置
在XP下,一般位于C:Documents and Settings用户名UserData,有些时候会在C:Documents and Settings用户名Application DataMicrosoftInternet ExplorerUserData。
在Vista下,位于C:Users用户名AppDataRoamingMicrosoftInternet ExplorerUserData。
userData的保存形式为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.封装

typeof window.localStorage == 'undefined' && ~function(){

var localStorage = window.localStorage = {},
    prefix = 'data-userdata',
    doc = document,
    attrSrc = doc.body,
    html = doc.documentElement,

    // save attributeNames to <html>'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 <body> that using for textStorage 
// and clearing them from the 'data-userdata' attribute's value of <html>
localStorage.clear = function(){

    html.load(prefix);

    var attrs = html.getAttribute(prefix).split(','),
        len = attrs.length;

    for(var i=0;i<len;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就不说了。

清晨说ぺ晚安 2017-08-29 2 楼

推荐使用 jStorage 插件,对应不同浏览器自动切换存储方式,接口统一。

同时建议对浏览器先用 modernizr 检测本地存储的支持程度,然后再对少数不支持的浏览器做特殊处理

夜无邪 2017-08-28 1 楼

跨浏览器的本地存储有几种方式吧:
1、localStorage:只支持IE8+、FireFox、Chrome、Opera等,不支持IE8以下的浏览器
2、浏览器Cookie:支持的数据存储量相对较少。
3、可以在页面上嵌一个隐藏的Flash,然后使用Flash的Flash SharedObject,它基本上不会有兼容性问题,只有要额外的引入Flash和JS,会增加页面负担。
4、Google Gears: 这是之前Google的一个离线方案,不过好像已经停止更新了
5、User Data: 是微软为IE专门在系统中开辟的一块存储空间(这个支持所有IE浏览器),所以说只支持Windows+IE的组合(单个文件的大小限制是128KB,一个域名下总共可以保存1024KB的文件,文件个数应该没有限制。在受限站点里这两个值分别是64KB和640KB,所以如果考虑到各种情况的话,单个文件最好能控制64KB以下。)