HTML5上localStorage键值赋值与更新兼容性探讨

最新推荐文章于 2024-07-03 14:28:39 发布

肖永威

最新推荐文章于 2024-07-03 14:28:39 发布

阅读量6.3k

点赞数

分类专栏：软件开发技术文章标签： html5 Storage JavaScript

本文链接：https://blog.csdn.net/xiaoyw71/article/details/53510222

版权

软件开发技术专栏收录该内容

62 篇文章 3 订阅

订阅专栏

　　去年年末上线的系统，有个非正常使用问题，困扰技术人员一年了。现象是这样的：在同一个终端IE浏览器上，使用不同帐号处理流程业务时，这是可能发生串帐号的问题，也就是说流程处理人不对了，而Chrome浏览器无此问题。

理论上每个办公终端是专用的，但是，培训或临时借用终端也时有发生。

　　今天下午，又陪技术人员分析代码，给出建议是针对IE浏览器强制清空localStorage。下班时，技术人员告诉我可以解决问题。晚上，我通过VPN网络访问SVN，查看代码修改情况，通过SVN代码版本对比，解决是如此简单，如下图所示。

这里写图片描述

　　对登录页login.html仅增加了三行JS代码，在每次进行登录操作时，首先清除localStorage缓存，如下所示：

    //使用Cordys自带的SSO插件进行登录
    if(window.localStorage.currentUserid){
        window.localStorage.clear();
    }
    if (!CordysRoot.sso) {
            if (!(CordysRoot.application && CordysRoot.sso)) {
                if (window.count < 11)
                    setTimeout(function () {
                        window.count++;
                        doLogin();
                    }, 333);
                else
                    alert('网络不给力，请重试');
                return;
            }
        CordysRoot.application.addType(CordysRoot, "wcp.library.system.SSO");
    }

　　不过，我就此又深入分析自行开发代码“rgdb.utils.js”中关于localStorage键值处理，代码片段如下所示：

    /**
     * 在当前域名下加载租户账号信息，默认为查询出租户账号信息的第一条
     */
    $.cordys.utils.getUserDetail().done(function () {
        var _flag = true;
        if (!window.localStorage.currentUserOrgaccid) {
            $.each($.cordys.utils.formatCustomObject(window.userDetail['tenantaccounts']['tenantaccount']), function (index, value) {
                if (value['tenantcode'] === $.cordys.utils.getCurrentTenantAbsolutePath().slice(6, -1) && _flag) {
                    window.localStorage.currentUserOrgaccid = $.cordys.utils.formatCustomObject(window.userDetail['tenantaccounts']['tenantaccount'])[index]['orgaccid'];
                    window.localStorage.currentUserOrgid = $.cordys.utils.formatCustomObject(window.userDetail['tenantaccounts']['tenantaccount'])[index]['orgid'];
                    window.localStorage.currentUserOrgcode = $.cordys.utils.formatCustomObject(window.userDetail['tenantaccounts']['tenantaccount'])[index]['orgcode'];
                    window.localStorage.currentUserOrgname = $.cordys.utils.formatCustomObject(window.userDetail['tenantaccounts']['tenantaccount'])[index]['orgname'];
                    window.localStorage.currentUserTenantid = $.cordys.utils.formatCustomObject(window.userDetail['tenantaccounts']['tenantaccount'])[index]['tenantid'];
                    window.localStorage.currentUserTenantcode = $.cordys.utils.formatCustomObject(window.userDetail['tenantaccounts']['tenantaccount'])[index]['tenantcode'];
                    window.localStorage.currentUserTenantname = $.cordys.utils.formatCustomObject(window.userDetail['tenantaccounts']['tenantaccount'])[index]['tenantname'];
                    window.localStorage.currentUserTenantdn = $.cordys.utils.formatCustomObject(window.userDetail['tenantaccounts']['tenantaccount'])[index]['tenantdn'];
                    window.localStorage.currentUserTenantaccount = $.cordys.utils.formatCustomObject(window.userDetail['tenantaccounts']['tenantaccount'])[index]['tenantaccount'];
                    window.localStorage.currentUserUserdn = $.cordys.utils.formatCustomObject(window.userDetail['tenantaccounts']['tenantaccount'])[index]['userdn'];
                    window.localStorage.currentUserCompanyid = $.cordys.utils.formatCustomObject(window.userDetail['tenantaccounts']['tenantaccount'])[index]['companyid'];
                    window.localStorage.currentUserid = $.cordys.utils.formatCustomObject(window.userDetail['userid']);
                    _flag = false;
                }
            });
        }

　　代码中currentUserid 键值赋值直接使用“=”，没有使用setItem(key,value) 模式。

　　代码中 window.localStorage.currentUserid = 方式，在IE中只能新增键值，无法实现更新操作？（技术人员解释是只要键值存在，IE就不做验证更新了）

　　如果代码中，用法更新为： window.localStorage.setItem(currentUserid, $.cordys.utils.formatCustomObject(window.userDetail[‘userid’])) 是否可行呢？

　　关于localStorage参考如下[1]：

　　在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

localStorage的优势

　　1、localStorage拓展了cookie的4K限制

　　2、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的

localStorage的局限

　　1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性

　　2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换

　　3、localStorage在浏览器的隐私模式下面是不可读取的

　　4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡

　　5、localStorage不能被爬虫抓取到

localStorage兼容性分析

这里写图片描述

localStorage的写入有三种方法

if(！window.localStorage){
            alert("浏览器支持localstorage");
            return false;
        }else{
            var storage=window.localStorage;
            //写入a字段
            storage["a"]=1;
            //写入b字段
            storage.a=1;
            //写入c字段
            storage.setItem("c",3);
            console.log(typeof storage["a"]);
            console.log(typeof storage["b"]);
            console.log(typeof storage["c"]);
        }

　　这里面是三种对localStorage的读取，其中官方推荐的是getItem\setItem这两种方法对其进行存取，不要问我这个为什么，因为这个我也不知道。

storage一些属性和方法： [2]

clear()：清除存储的键值对数据； 
getItem(<key>)：通过key获取value值； 
key(<index>)：通过索引获取key值； 
length：返回键值对的个数； 
removeItem(<key>)：通过key移出指定数据； 
setItem(<key>,<value>)：添加一个键值对，当指定key的键值对存在，则实现更新操作； 
[<key>]：通过数组下标的方式，使用key获取指定value值。

　　明日，建议技术人员按官方推荐方法试试，看效果！

[1]. localStorage使用总结谢灿勇 2016-06-26

[2]. html5指南-5.使用web storage存储键值对的数据

[3]. Internet Explorer 升级到IE11遇到问题案例分析肖永威 2016-02-27