在 HTML5 localStorage 中存储对象 - Javascript

在 Javascript 中，我们可以使用 HTML5 的 localStorage 来存储字符串，数字和布尔值等简单的数据类型。但是如果我们想要存储一个复杂的对象，该怎么办呢？

问题

传统的 localStorage 只能存储字符串类型的数据，所以如果我们需要在 localStorage 中存储一个对象，我们需要将对象转换成一个字符串，然后存储到 localStorage 中。

解决方案

将对象转换成字符串

在将对象转换成字符串之前，我们需要了解两个函数：JSON.stringify() 和 JSON.parse()。

JSON.stringify() 函数可以将一个对象转换成一个字符串。

let obj = { name: "Alice", age: 20 };
let str = JSON.stringify(obj);
console.log(str); // 输出: {"name":"Alice","age":20}

JSON.parse() 函数可以将一个字符串转换成一个对象。

let str = '{"name":"Alice","age":20}';
let obj = JSON.parse(str);
console.log(obj.name); // 输出: Alice
console.log(obj.age); // 输出: 20

因此，我们可以将一个对象转换成一个字符串，然后将该字符串存储到 localStorage 中。

let obj = { name: "Alice", age: 20 };
let str = JSON.stringify(obj);
localStorage.setItem("userData", str);

将字符串转换成对象

当我们需要读取存储在 localStorage 中的对象数据时，我们需要将该字符串转换成一个对象。

let str = localStorage.getItem("userData");
let obj = JSON.parse(str);
console.log(obj.name); // 输出: Alice
console.log(obj.age); // 输出: 20

封装存取方法

为了方便地操作存储在 localStorage 中的对象数据，我们可以封装一个存取方法。

function setLocalData(key, value) {
    let str = JSON.stringify(value);
    localStorage.setItem(key, str);
}

function getLocalData(key) {
    let str = localStorage.getItem(key);
    let obj = JSON.parse(str);
    return obj;
}

let userData = { name: "Alice", age: 20 };
setLocalData("userData", userData);

let user = getLocalData("userData");
console.log(user.name); // 输出: Alice
console.log(user.age); // 输出: 20

总结

在使用 localStorage 存储对象时，我们需要将对象转换成一个字符串，然后存储到 localStorage 中。当需要读取该对象数据时，我们需要将该字符串转换成一个对象。我们可以使用 JSON.stringify() 和 JSON.parse() 函数来完成对象和字符串之间的转换。