HTML5 localstorage 添加双引号

Posted 2023-03-05

【中文标题】HTML5 localstorage 添加双引号

【英文标题】：HTML5 localstorage adding in double quotes

【发布时间】：2018-03-24 13:25:59

【问题描述】：

我目前正在将字段的值分配给变量：

userName = document.getElementById('userName').value;

然后将该变量分配给 localstorage：

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

在此处检索该项目：

var retrievedUserName = localStorage.getItem('userName');

然后尝试将 item 的内容输出到 html div 中：

document.getElementById("response-heading-name2").innerHTML = retrievedUserName;

...但是当我检查 HTML 时，它会输出带有双引号的字符串：“我的名字”

有谁知道为什么会这样，以及如何阻止双引号出现？

【参考方案1】：

这与本地存储无关。

使用JSON.stringify 将数据结构转换为 JSON 时会添加引号。

在从本地存储中检索 JSON 后，应将其转换回带有 JSON.parse 的 javascript 数据结构。

---

使用JSON的目的是确保你存储的是字符串，因为本地存储只能存储字符串。

由于您获得了输入的值，因此您知道它将是一个字符串。所以你可以完全放弃 JSON 而不是 JSON.stringify 它。

【讨论】：

没错，我在阅读第一段时也意识到了这一点。不错。

【参考方案2】：

localStorage 始终使用双引号存储字符串数据，当您检索相同的数据时，您将使用双引号获得。所以只需使用JSON.parse 来修复它。

var retrievedUserName = JSON.parse(localStorage.getItem('userName'));

【讨论】：

Stringify 走错路了。您需要使用解析。 （就像我在五年前的回答中所说的那样）。

"localStorage 始终使用双引号存储字符串数据" — 不，它不会。它将存储您放入其中的字符串。如果字符串包含双引号，则 localStorage 中的数据将。如果他们不这样做，就不会。

如果字符串中包含双引号，那么localStorage中的数据会。如果他们不这样做，它就不会 - 不，我将值作为参数传递，它用双引号存储。