解决localStorage存储JSON对象问题

问题场景

有些时候我们会将服务器的数据请求到本地来存放，方便浏览器的加载，当使用localStorage来直接存储JSON对象时就会出现[object Object] 这样的问题。

问题分析

当涉及到在网页中存储数据时，localStorage 是一个常用的方法。它是 Web Storage API 的一部分，允许网页在用户的浏览器中存储键值对数据。这些数据被保存在用户的本地存储空间中，并在同一个域名下的页面之间共享。

localStorage 只能存储字符串数据。这意味着，当使用 localStorage.setItem(key, value) 存储数据时，value 必须是一个字符串。如果尝试存储非字符串数据类型（如对象、数组、数字等），localStorage 会自动将其转换为字符串。比如存放一个JSON对象的数据就会自动转换成[object Object]，举个例子，假设现在有个用户信息对象，现在需要将这些用户信息存储到localStorage。

let userInfo = {
  "name": "Tom",
  "age": 19,
  "sex":"男",
  "birthday": "2005-08-16",
  "tel": "15999999999"
}
localStorage.setItem("userInfo",userInfo);
console.log(localStorage.getItem("userInfo"))
let userInfo = {
  "name": "Tom",
  "age": 19,
  "sex":"男",
  "birthday": "2005-08-16",
  "tel": "15999999999"
}
localStorage.setItem("userInfo",userInfo);
console.log(localStorage.getItem("userInfo"))
let userInfo = {
  "name": "Tom",
  "age": 19,
  "sex":"男",
  "birthday": "2005-08-16",
  "tel": "15999999999"
}
localStorage.setItem("userInfo",userInfo);
console.log(localStorage.getItem("userInfo"))

去控制台打印输出userInfo里面的值会发现是[object Object]，虽然说到它会转化为字符串，但是不会按照我们的预期去转化。

解决问题

为了正确地将对象存储到 localStorage 中，我们可以使用 JSON.stringify() 方法将对象转换为字符串然后进行存储：

let userInfo = {
  "name": "Tom",
  "age": 19,
  "sex":"男",
  "birthday": "2005-08-16",
  "tel": "15999999999"
}
localStorage.setItem("userInfo",JSON.stringify(userInfo));//这里就是在存储之前将需要存储的值转化为字符串
console.log(localStorage.getItem("userInfo"))
let userInfo = {
  "name": "Tom",
  "age": 19,
  "sex":"男",
  "birthday": "2005-08-16",
  "tel": "15999999999"
}
localStorage.setItem("userInfo",JSON.stringify(userInfo));//这里就是在存储之前将需要存储的值转化为字符串
console.log(localStorage.getItem("userInfo"))
let userInfo = {
  "name": "Tom",
  "age": 19,
  "sex":"男",
  "birthday": "2005-08-16",
  "tel": "15999999999"
}
localStorage.setItem("userInfo",JSON.stringify(userInfo));//这里就是在存储之前将需要存储的值转化为字符串
console.log(localStorage.getItem("userInfo"))

存储之前将需要存储的数据转化为字符串之后存储就没有问题了：

{"name":"Tom","age":19,"sex":"男","birthday":"2005-08-16","tel":"15999999999"}
{"name":"Tom","age":19,"sex":"男","birthday":"2005-08-16","tel":"15999999999"}
{"name":"Tom","age":19,"sex":"男","birthday":"2005-08-16","tel":"15999999999"}

重新去读取这个数据的时候是字符串，在这个时候就需要使用 JSON.parse()去重新将读出来的文本转换为JSON对象：

let userInfo = {
  "name": "Tom",
  "age": 19,
  "sex":"男",
  "birthday": "2005-08-16",
  "tel": "15999999999"
}
localStorage.setItem("userInfo",JSON.stringify(userInfo));
console.log(JSON.parse(localStorage.getItem("userInfo")))
let userInfo = {
  "name": "Tom",
  "age": 19,
  "sex":"男",
  "birthday": "2005-08-16",
  "tel": "15999999999"
}
localStorage.setItem("userInfo",JSON.stringify(userInfo));
console.log(JSON.parse(localStorage.getItem("userInfo")))
let userInfo = {
  "name": "Tom",
  "age": 19,
  "sex":"男",
  "birthday": "2005-08-16",
  "tel": "15999999999"
}
localStorage.setItem("userInfo",JSON.stringify(userInfo));
console.log(JSON.parse(localStorage.getItem("userInfo")))

输出结果：

{
    "name": "Tom",
    "age": 19,
    "sex": "男",
    "birthday": "2005-08-16",
    "tel": "15999999999"
}
{
    "name": "Tom",
    "age": 19,
    "sex": "男",
    "birthday": "2005-08-16",
    "tel": "15999999999"
}
{
    "name": "Tom",
    "age": 19,
    "sex": "男",
    "birthday": "2005-08-16",
    "tel": "15999999999"
}

总结问题

当使用 localStorage 存储数据时，需要记住以下要点：

1. 数据类型限制： localStorage 只能存储字符串数据。
2. 转换非文本数据： 若要存储非字符串数据（如对象、数组等），需要使用 JSON.stringify() 方法将其转换为字符串，然后存储。
3. 数据获取与解析： 从 localStorage 中取回数据时，使用 localStorage.getItem() 获取存储的字符串，然后通过 JSON.parse() 方法将其转换回原始数据类型。

示例：

// 存储对象到 localStorage
const myObject = { name: "John", age: 30 };
localStorage.setItem('user', JSON.stringify(myObject));
// 从 localStorage 中取回并解析对象
const storedData = localStorage.getItem('user');
const parsedData = JSON.parse(storedData);
console.log(parsedData); // 输出: { name: "John", age: 30 }
// 存储对象到 localStorage
const myObject = { name: "John", age: 30 };
localStorage.setItem('user', JSON.stringify(myObject));

// 从 localStorage 中取回并解析对象
const storedData = localStorage.getItem('user');
const parsedData = JSON.parse(storedData);
console.log(parsedData); // 输出: { name: "John", age: 30 }
// 存储对象到 localStorage
const myObject = { name: "John", age: 30 };
localStorage.setItem('user', JSON.stringify(myObject));

// 从 localStorage 中取回并解析对象
const storedData = localStorage.getItem('user');
const parsedData = JSON.parse(storedData);
console.log(parsedData); // 输出: { name: "John", age: 30 }

总之，localStorage 对存储的数据类型有限制。