关于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。

转载于:https://www.cnblogs.com/Dengxiaobo/p/7465509.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值