跨浏览器的本地存储

红太狼 2021-05-12 11:50 580阅读 0赞

跨浏览器的本地存储多种方式，例如：  
1、localStorage:只支持IE8+、FireFox、Chrome、Opera等，不支持IE8以下的浏览器。  
2、浏览器Cookie：支持的数据存储量相对较少，每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉，有些浏览器甚至不支持；同时，Cookie存在安全性问题，如果cookie被人拦截了，就可以取得所有的session信息。  
3、可以在页面上嵌一个隐藏的Flash，然后使用Flash的Flash SharedObject，它基本上不会有兼容性问题，只有要额外的引入Flash和JS，但这样会增加页面负担。  
4、User Data： 是微软为IE专门在系统中开辟的一块存储空间(这个支持所有IE浏览器)，只支持Windows+IE的组合（单个文件的大小限制是128KB，一个域名下总共可以保存1024KB的文件，文件个数应该没有限制。在受限站点里这两个值分别是64KB和640KB。）  
综上，我们可以用以localStorage+User Data结合的方式来作为本地存储的解决方案：

[![复制代码][copycode.gif]][copycode.gif 1]

(function (window) {
        window.localDataStore = {
            hname: location.hostname ? location.hostname : 'localStatus',
            isLocalStorage: window.localStorage ? true : false,
            dataDom: null,
            initDom: function () {
                if (!this.dataDom) {
                    try {
                        this.dataDom = document.createElement('input'); 
                        this.dataDom.type = 'hidden';
                        this.dataDom.style.display = "none";
                        this.dataDom.addBehavior('#default#userData'); 
                        document.body.appendChild(this.dataDom);
                        var exDate = new Date();
                        exDate = exDate.getDate() + 30;
                        this.dataDom.expires = exDate.toUTCString(); 
                    } catch (ex) {
                        return false;
                    }
                }
                return true;
            },
            set: function (key, value) {
                if (this.isLocalStorage) {
                    window.localStorage.setItem(key, value);
                } else {
                    if (this.initDom()) {
                        this.dataDom.load(this.hname);
                        this.dataDom.setAttribute(key, value);
                        this.dataDom.save(this.hname)
                    }
                }
            },
            get: function (key) {
                if (this.isLocalStorage) {
                    return window.localStorage.getItem(key);
                } else {
                    if (this.initDom()) {
                        this.dataDom.load(this.hname);
                        return this.dataDom.getAttribute(key);
                    }
                }
            },
            remove: function (key) {
                if (this.isLocalStorage) {
                    localStorage.removeItem(key);
                } else {
                    if (this.initDom()) {
                        this.dataDom.load(this.hname);
                        this.dataDom.removeAttribute(key);
                        this.dataDom.save(this.hname)
                    }
                }
            }
        }
    })(window);

[copycode.gif]: http://common.cnblogs.com/images/copycode.gif
[copycode.gif 1]: /images/20210511/597a4107ad714553b2aab3fbada4110d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，580人围观）

还没有评论，来说两句吧...

相关阅读

相关本地浏览器：测试跨域请求

前言本地浏览器在线模拟跨域请求 -------------------- 操作如下： chrome浏览器F12调出开发者工具，在开发者工具界面如下： ![在

向右看齐/ 2022年10月31日 10:53/ 0 赞/ 610 阅读

相关前端性能优化05_浏览器本地存储

浏览器存储 Cookie, SessionStorage, LocalStorage这三者都可以被用来在浏览器端存储数据，而且都是字符串类型的键值对！

喜欢ヅ旅行/ 2022年09月12日 11:48/ 0 赞/ 211 阅读

相关浏览器本地存储

在较高版本的浏览器中，`js`提供了`sessionStorage`和`globalStorage`。在`HTML5`中提供了`localStorage`来取代`globalS

刺骨的言语ヽ痛彻心扉/ 2022年07月15日 09:51/ 0 赞/ 213 阅读

相关本地存储

1、cookie 存储及设置时间 var date=new Date(); date.setDate(date.getDate()+7); do

刺骨的言语ヽ痛彻心扉/ 2022年06月09日 09:53/ 0 赞/ 232 阅读

相关本地存储

<table> <tbody> <tr> <td><b>目录</b></td> </tr> </tbody> </table> 1.本地存储

小咪咪/ 2022年06月04日 03:46/ 0 赞/ 294 阅读

相关浏览器的本地存储与服务器端存储

数据既可以在浏览器本地存储，也可以在服务器端存储浏览器端可以保存一些数据，需要的时候直接从本地获取，sessionStorage,localStorage和cookie

ゝ一世哀愁。/ 2022年05月16日 11:45/ 0 赞/ 204 阅读

相关浏览器跨域

资源贴：优秀好帖：[https://blog.csdn.net/wonking666/article/details/79159180][https_blog.csdn.n

╰半橙微兮°/ 2022年05月12日 04:40/ 0 赞/ 233 阅读

相关浏览器缓存原理以及本地存储

> 作为一名前端工作人员，前端的缓存知识是必须掌握的，因为一个网站打开网页的速度直接关系到用户体验，用户粘度，而提高网页的打开速度有很多方面需要优化，其中比较重要的一点就是利用

痛定思痛。/ 2022年03月16日 14:42/ 0 赞/ 386 阅读

相关浏览器的本地存储

浏览器的本地存储一、sessionStorage 1.存储数据 2.获取数据 3.删除数据 4.清空数据

偏执的太偏执、/ 2021年09月07日 06:12/ 0 赞/ 375 阅读

相关跨浏览器的本地存储

跨浏览器的本地存储多种方式，例如： 1、localStorage:只支持IE8+、FireFox、Chrome、Opera等，不支持IE8以下的浏览器。 2、浏览器Co

红太狼/ 2021年05月12日 11:50/ 0 赞/ 581 阅读