• localStorage和sessionStorage火狐浏览器和其他高级浏览器的区别


    例子:

    <script>
    window.onload=function(){
    var oSetData = document.getElementById('setData');
    var oGetData = document.getElementById('getData');
    oSetData.onclick=function(){
      if(window.localStorage){
        console.log('支持');
        localStorage.date1 = '{"content":{"img":"/static/img/listico1.jpg","content":"如何采取正确的方式进行救治1","date":"2015年11月28日14:14"}}';
        localStorage.date2 = '{"content":{"img":"/static/img/listico2.jpg","content":"如何采取正确的方式进行救治2","date":"2015年11月28日14:14"}}';
        localStorage.date3 = '{"content":{"img":"/static/img/listico3.jpg","content":"如何采取正确的方式进行救治3","date":"2015年11月28日14:14"}}';
      }
    };
    oGetData.onclick=function(){
      if(window.localStorage){
        //var count = 0;
        for(var name in localStorage){
          console.log(name);
          //if(count<localStorage.length){
            var str = localStorage[name];
            var json = new Function('return '+str)();
            console.log(json);
          //}
          //count++;
        }

      }
    };
    };
    </script>

    <body>
    <input id="setData" type="button" value="设置"/>
    <input id="getData" type="button" value="获取"/>
    </body>

    这段测试的代码用调试工具可以看出火狐浏览器和其他高级浏览器(谷歌)的区别,在调试工具中找到localStorage/sessionStorage可以看出,这个时候火狐浏览器是报错的(SyntaxError: missing ] after element list)[native code],我分析的原因是火狐的name值这个时候有9个(可以把代码中var str =.../var json =...都注释掉就可以看到),date1/2/3是设置出来的,后面还有key/getItem/setItem/removeItem/clear/length这些是localStorage/sessionStorage对象的属性和方法,在用for..in..的时候会遍历到它们,当遍历到key方法时,new Function('return '+str)()执行这条语句时就会报错。其他浏览器不会这样,name值只是设置出的三个,用for..in..的时候不会遍历到localStorage/sessionStorage对象的属性和方法。我发现这些浏览器localStorage/sessionStorage的length值是一样的,所以解决方案就是注释里的代码,添加了一个计数器,再进行判断,当count大于length的时候,就不用执行后面的语句(不是我想获取的数据),这样就解决了火狐浏览器兼容问题。要是我有错误的地方请帮忙指出,有更好的方法希望可以交流。

  • 相关阅读:
    课表
    hz评测机的迷惑操作
    联赛模拟测试16
    第四阶段总结
    震惊!OI居然还考天体运动
    简单题 题解
    P2340 [USACO03FALL]Cow Exhibition G题解
    题目分享I 三代目
    题目分享H 三代目
    题目分享G 三代目
  • 原文地址:https://www.cnblogs.com/duanlianjiang/p/5027096.html
Copyright © 2020-2023  润新知