localStorage 值可以是对象还是数组？答案

【问题标题】：Can a localStorage value be an object or array?localStorage 值可以是对象还是数组？
【发布时间】：2017-06-27 00:52:00
【问题描述】：

我正在尝试使用localStorage("save","{teams:5, points:20} 等在用户计算机中设置存储。但我不确定该值是否可以是对象。我已经检查了互联网，但我似乎无法在那里找到明确的答案。

var data={
teams:5, points:25,team1:5,team2:10, team3:5, team4:0, team5:5};
localStorage ("save", data);

想法？

【问题讨论】：

标签： javascript html local-storage javascript-objects

【解决方案1】：

不，localstorage 将字符串作为并保存。如果要保存任何对象，请将其转换为字符串，然后保存。从本地存储中获取它时，我们会得到字符串。您可以轻松地将其转换为对象。如果你直接将一个对象保存到localStorage，那么它将以这种方式保存“[object Object]”，当从localStorage中获取它时，你会得到“[object Object]” strong> 作为字符串。

错误代码：

var data={teams:5, points:25,team1:5,team2:10, team3:5, team4:0, team5:5};
localStorage.setItem("save", data);
localStorage.getItem("save")

你会得到"[object Object]"

正确代码：

var data={teams:5, points:25,team1:5,team2:10, team3:5, team4:0, team5:5};
localStorage.setItem("save",JSON.stringify(data));
localStorage.getItem("save")

从 localStorage 获取值时

错误代码：

localStorage.getItem("save")

它将以字符串的形式获取数据。

正确代码：

JSON.parse(localStorage.getItem("save"))

它将以对象的形式返回数据。

我希望解决方案得到很好的解释。

【讨论】：

【解决方案2】：

您需要使用localStorage.setItem(keyName, keyValue);

对于存储对象，您可以使用 JSON.stringify(object) 将对象转换为字符串。

来自MDN

键名
一个 DOMString 包含你想要的键名创建/更新。

键值
一个 DOMString 包含你想要的值提供您正在创建/更新的密钥。

【讨论】：

【解决方案3】：

不，不能，但您可以使用 stringify。例如：

localStorage.setItem('user', JSON.stringify(r.user));

【讨论】：

【解决方案4】：

本地存储仅限于处理字符串键/值对，您可以像下面那样使用 JSON.stringify 并同时获取值 JSON.parse

var testObject = { {name:"test", time:"Date 2017-02-03T08:38:04.449Z"} };

// 将对象放入存储中

localStorage.setItem('testObject', JSON.stringify(testObject));

// 从存储中检索对象

var retrievedObject = localStorage.getItem('testObject');

console.log('retrievedObject: ', JSON.parse(retrievedObject));

【讨论】：

【解决方案5】：

不，键和值必须是DOMString。见https://developer.mozilla.org/en-US/docs/Web/API/Storage/setItem

您可以做的是在设置数据之前将数据序列化为 JSON

localStorage.setItem('save', JSON.stringify(data))

读取值时，可以将其解析回一个对象

let saveData = JSON.parse(localStorage.getItem('save'))

【讨论】：

...吹毛求疵，但关于“必须”，你可以传递非 DOMString 值，但它们的toString() 结果将被保存。
@Kaiido 我倾向于将 API 视为合约