例子:

<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的时候,就不用执行后面的语句(不是我想获取的数据),这样就解决了火狐浏览器兼容问题。要是我有错误的地方请帮忙指出,有更好的方法希望可以交流。

localStorage和sessionStorage火狐浏览器和其他高级浏览器的区别的更多相关文章

  1. JS 客户端(浏览器)存储数据之 localStorage、sessionStorage和indexDB

    基本概念 1.localStorage和sessionStorage是HTML5 Web存储的提供的两种存储方式,在IE7以上以及大多数浏览器都是支持的 2.localStorage和sessionS ...

  2. localStorage和sessionStorage区别

    localStorage和sessionStorage一样都是用来存储客户端临时信息的对象. 他们均只能存储字符串类型的对象(虽然规范中可以存储其他原生类型的对象,但是目前为止没有浏览器对其进行实现) ...

  3. localStorage、sessionStorage详解,以及storage事件使用

    有关localStorage和sessionStorage的特性. localStorage本身带有方法有 添加键值对:localStorage.setItem(key,value),如果key存在时 ...

  4. localStorage和sessionStorage区别(包括同源的定义)

    localStorage和sessionStorage一样都是用来存储客户端临时信息的对象. 他们均只能存储字符串类型的对象(虽然规范中可以存储其他原生类型的对象,但是目前为止没有浏览器对其进行实现) ...

  5. cookie、LocalStorage、sessionStorage三者区别以及使用方式

    cookie用来保存客户浏览器请求服务器页面的请求信息 HTML5的WebStorage提供了两种API:localStorage(本地存储)和sessionStorage(会话存储) WebStor ...

  6. JS --- 本地保存localStorage、sessionStorage用法总结

    JS的本地保存localStorage.sessionStorage用法总结 localStorage.sessionStorage是Html5的特性,IE7以下浏览器不支持 为什么要掌握localS ...

  7. localstorage 和 sessionstorage 是什么?区别是什么?

    localstorage 和 sessionstorage 一样都是用来存储客户端临时信息的对象,他们均只能存储字符串类型对象: localstorage生命周期是永久的,这意味着除非用户在浏览器提供 ...

  8. 如何使用T-SQL备份还原数据库及c#如何调用执行? C#中索引器的作用和实现。 jquery控制元素的隐藏和显示的几种方法。 localStorage、sessionStorage用法总结 在AspNetCore中扩展Log系列 - 介绍开源类库的使用(一) span<T>之高性能字符串操作实测

    如何使用T-SQL备份还原数据库及c#如何调用执行? 准备材料:Microsoft SQL Server一部.需要还原的bak文件一只 一.备份 数据库备份语句:user master backup ...

  9. localStorage、sessionStorage用法总结

    1.作用 1.1 共同点:       都是用来存储客户端临时信息的对象.       均只能存储字符串类型的对象(虽然规范中可以存储其他原生类型的对象,但是目前为止没有浏览器对其进行实现). 1.2 ...

随机推荐

  1. ASP.NET三层架构的分析

    BLL   是业务逻辑层   Business   Logic   Layer DAL   是数据访问层   Data   Access   Layer ASP.NET的三层架构(DAL,BLL,UI ...

  2. Android零碎知识点总结

    1 简单的跨进程通信可以用Messenger类,不用AIDL. 2 当一个Service没有action时,它默认是exported="false"的,其它进程用它的包名和类名构造 ...

  3. Win7刷新环境变量

    在“我的电脑”->“属性”->“高级”->“环境变量”中增加或修改环境变量后,需重启系统才能使之生效.有没有什么方法可让它即时生效呢? 下面介绍一种方法: 以修改环境变量“PATH” ...

  4. 1207.1——C语言 函数

    函数可以分为无参函数和有参函数. 无参函数的定义 无参函数定义的一般形式如下:返回值类型  函数名(){    函数体} 说明: 返回值类型可以是C语言中的任意数据类型. 函数名是标识符的一种,命名规 ...

  5. css 梯形标签页

    html 代码 略 css : nav > a{ position: relative; display: inline_block; padding: .3em 1em 0; } nav &g ...

  6. java.lang.NoClassDefFoundError: javax/xml/stream/XMLStreamException

    ?缺少jsr173_1.0_api.jar 包 或者jdk版本不对(包括工程和tomcat等服务器的jdk版本) 以前的一个xfire工程,今天重新导进后不能运行,修改工程的jdk版本不行,最后发现是 ...

  7. JDK动态代理例子

    JDK动态代理的代理类必须实现于接口.如果要代理类,则使用CGLIB代理. 先定义一个接口: public interface Character { public void show(); } 接着 ...

  8. shell练习--批量创建账号

    #!/bin/bash #By spinestars #-- #cksum5位数获取方法,可能有重复 #pd="user`head -200 /dev/urandom | cksum | h ...

  9. 推荐大家一本学习php模式的书

    对我来讲,写程序不是码代码,不想只是简单的将类拿来调用,然后功能实现了,可是以后要做一些扩展或者是修改就要对代码大刀阔斧. 在网站的开发过程中,使用一些框架,团队就可以在一定的程度上,分工合作.但是当 ...

  10. Fedora15下搭建QT开发环境及编译QT

    看了不少linux上编译qt的文章,实际上直接通过yum 安装qt是最方便的,请参考<yum安装qt> 不过初步接触fedora,为了了解一下如何在linux上编译.安装开源代码,所以必须 ...