在 localstorage 中保存对象显示 [object Object] - Javascript

在 JavaScript 中，如果将一个对象保存到 localstorage 中并尝试在控制台中输出它，你会发现它返回的是 [object Object]。这是因为 localStorage 只能存储字符串，而不是 JavaScript 的对象。

为了在 localstorage 中保存对象，我们需要将对象转换为字符串。有多种方法可以做到这一点，以下是其中两种方法：

1. 使用 JSON.stringify()

使用 JSON.stringify() 可以将 JavaScript 对象转换为 JSON 字符串。

let myObject = { name: "John", age: 30 };
localStorage.setItem("myObject", JSON.stringify(myObject));

如上述代码，我们可以将 myObject 对象转换成 JSON 字符串并存储到 localStorage 中。

现在，我们可以通过以下代码将其取回并将其转换回 JavaScript 对象：

let retrievedObject = localStorage.getItem("myObject");
console.log(JSON.parse(retrievedObject)); 

我们使用 localStorage.getItem() 将字符串从 localStorage 中检索出来，然后使用 JSON.parse() 将其转换回 JavaScript 对象并在控制台中打印。

2. 使用自定义函数

我们也可以编写自己的 JavaScript 函数来将对象转换为字符串。

function convertObjectToString(obj) {
  var str = "";
  for (var key in obj) {
    str += key + ":" + obj[key] + ",";
  }
  return str.slice(0, -1);
}

如上面的代码，我们可以创建一个 convertObjectToString() 函数，它将对象转换为逗号分隔的字符串。我们还可以编写相应的解析函数 convertStringToObject()，以便将存储在 localStorage 中的字符串转换回对象。

function convertStringToObject(str) {
  var pairs = str.split(",");
  var obj = {};
  pairs.forEach(function(pair) {
    pair = pair.split(":");
    obj[pair[0]] = pair[1];
  });
  return obj;
}

let myObject = { name: "John", age: 30 };
localStorage.setItem("myObject", convertObjectToString(myObject));

let retrievedObject = localStorage.getItem("myObject");
console.log(convertStringToObject(retrievedObject)); 

如上述代码，我们可以将 myObject 对象通过 convertObjectToString() 函数转换成字符串并存储到 localStorage 中。

现在，我们可以通过以下代码将其取回并将其转换回 JavaScript 对象：

let retrievedObject = localStorage.getItem("myObject");
console.log(convertStringToObject(retrievedObject)); 

在上述代码中，我们使用 localStorage.getItem() 将字符串从 localStorage 中检索出来，然后使用 convertStringToObject() 将其转换回 JavaScript 对象并在控制台中打印。

无论是使用 JSON.stringify() 还是自定义函数，这些方法都可以用于在 localstorage 中保存对象而不是返回 [object Object] 的字符串。