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

  去年年末上线的系统,有个非正常使用问题,困扰技术人员一年了。现象是这样的:在同一个终端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

相关推荐
©️2020 CSDN 皮肤主题: 酷酷鲨 设计师:CSDN官方博客 返回首页