如何用jQuery在localStorage存储对象并正确获取属性值？

这是个非常常见的小坑——localStorage只能存储字符串类型的数据，当你直接把对象传进去时，它会默认调用对象的toString()方法，结果就变成了[object Object]，自然没法访问里面的country属性。

要解决这个问题，我们需要借助JSON的序列化和反序列化来处理：

1. 存储对象时：用JSON.stringify()把JavaScript对象转为JSON格式的字符串
2. 取出数据时：用JSON.parse()把JSON字符串转回JavaScript对象

修改后的完整代码如下：

<input type="text" id="text"> 
<button value="save" onClick="setStorage()" id="btn"> Save </button> 
<script> 
function setStorage(){ 
  var text = $("#text").val(); 
  testobj = {'country' : 'testcountry', 'population' : 3} 
  // 存储时将对象序列化为JSON字符串
  localStorage.setItem('storage', JSON.stringify({'text' : testobj})); 
  var retreived = localStorage.getItem('storage'); 
  // 取出时将JSON字符串反序列化为对象
  retreived = JSON.parse(retreived); 
  // 现在可以正常访问country属性了
  console.log('retreived country: ' + retreived.text.country); 
} 
</script>

这样修改后，你就能在控制台看到testcountry这个预期值了。简单来说，localStorage就是个“字符串专属仓库”，我们得把对象打包成字符串存进去，取出来再拆包还原成对象，才能正常操作里面的属性~

内容的提问来源于stack exchange，提问作者Wesley van Straalen