关于localstorage存储JSON对象的问题

如果你尝试用LocalStorage存储Object,却意外发现取出来以后不是你想要的,例如:

存储一个对象,并将对象的name属性的值给P标签。

HTML:

  <p></p>

JS:

  var fruit={
        name:‘apple‘,
        color:‘red‘,
        taste:‘sweet‘
    }

    localStorage.myfruit=fruit;
    console.log(localStorage.myfruit);

    document.getElementsByTagName(‘p‘)[0].innerHTML=localStorage.myfruit.name;

结果:

这时你会发现name的值取不出来。因此需要我们在存取Object的时候,额外进行一些操作,如下:

JS:

  

  var fruit={
    name:‘apple‘,
    color:‘red‘,
    taste:‘sweet‘
  }


  localStorage.myfruit=JSON.stringify(fruit);//将对象类型转成字符串类型存储
  console.log(localStorage.myfruit);


  var obj=JSON.parse(localStorage.myfruit);//将字符串重新解析成JSON对象
  document.getElementsByTagName(‘p‘)[0].innerHTML=obj.name;


结果:

结论:

  在使用LocalStorage进行存储时需要先使用JSON.stringify()方法将Object转换成String,然后存储。

  在取值时需要使用JSON.parse()方法将String转回Object。

时间: 2024-10-06 06:36:22

关于localstorage存储JSON对象的问题的相关文章

sessionStorage存储json对象

应用场景: 账单列表中A页面:点击其中的一列,ajax返回的数据在这一页 点击进入账单详情B页面: 因为在A页面已经做过ajax的请求了,所以希望把当前其中的一个数组对象传到B页面中,所以,就考虑到暂时存到sessionStorage中. 目的:A页面传json对象到B页面中: 方法:sessionStorage; 注意的问题,sessionStorage.setItem("key","value")内存储的都是字符串,所以,可想而知,如果以对象的形式存到sessi

html5之本地存储—JSON对象的使用:

JSON.stringify(data):将对象转为JSON格式的文本数据,并将其返回. JSON.parse(str) :将数据文本转为JSON数据 [javascript] function localSaveJsonStorage(){ var data=new Object; data.name=document.getElementById("userName").value; data.email= document.getElementById("email&q

localstorage存储对象

之前在客户端存储数据一直用的是cookie,由于有大小等限制,随着html5时代的到来,现在大多数用的是localstorage存储数据: 例如: localStorage.setItem("key","value");//存储变量名为key,值为value的变量 localStorage.key = "value"//存储变量名为key,值为value的变量 localStorage.getItem("key");//获取存

localStorage存储数组或者对象的问题总结

在做  保存选中的复选框记录(跳转到下个页面返回时希望原先选中的东西还在)时, 用到了localStorage存储数据. 由于复选框的内容有点多,就在localStorage中存入了对象(因为考虑到复选框有可能会多选,长度不一定,没有用二维数组). //首先先声明了存储复选框的对象checkarr var checkarr={}; //将数据存入checkarr中 function storeCheckarr(checkname){ //每列复选框都是一条数组:checkname:[] chec

使用sessionStorage、localStorage存储数组与对象

有时候,我们需要将数据存储到sessionStorage和localStorage中,这样做的好处有: 1 缓存数据 2 减少对内存的占用 但是,storage只能存储字符串的数据,对于JS中常用的数据或对象却不能直接存储. var obj = { name:'Jim' }; sessionStorage.obj = obj; localStorage.obj = obj; var arr = [1,2,3]; sessionStorage.obj = arr; localStorage.obj

使用sessionStorage、localStorage存储数组与对象(转)

http://my.oschina.net/crazymus/blog/371757 使用sessionStorage.localStorage存储数组与对象 发表于3个月前(2015-01-26 12:11)   阅读(708) | 评论(0) 5人收藏此文章, 我要收藏 赞0 慕课网,程序员升职加薪神器,点击免费学习 移动web 有时候,我们需要将数据存储到sessionStorage和localStorage中,这样做的好处有: 1 缓存数据 2 减少对内存的占用 但是,storage只能

sessionStorage、localStorage 存储及如何存储数组与对象

1.存储,获取,清楚 sessionStorage.setItem("key",val) sessionStorage.getItem("key") sessionStorage.removeItem("key") 2.存数组 var aa=[1,2,3]; var sStorage=window.sessionStorage; sStorage.aa=aa; console.log(sStorage.aa); //输出1,2,3 /*下面我写个

LocalStorage存储和cookie存储

localStorage是H5的新特性,主要用来本地存储,一般浏览器支持的大小是5M,不同浏览器会有所不同,解决了cookie存储空间不足的问题. 2.使用:     ⑴.存 if(!window.localStorage){ alert("浏览器不支持localstorage"); return false; }else{ var storage = window.localStorage; // 方法1 storage["a"] = 1; // 方法2 stor

json对象和json字符串转换方法

在WEB数据传输过程中,json是以文本,即字符串的轻量级形式传递的,而客户端一般用JS操作的是接收到的JSON对象,所以,JSON对象和JSON字符串之间的相互转换.JSON数据的解析是关键. 先明确2个概念例如: JSON字符串: var str1 = '{ "name": "deyuyi", "sex": "man" }'; JSON对象: var str2 = { "name": "del