JSON示例让我感到困惑-关于JSON.parse，JSON.stringify，localStorage.setItem和localStorage.getItem

Question

我刚开始学习JSON，但W3schools并不能很好地解释每行代码的作用。虽然我大概能理解其中一些含义，但我想完全弄明白它们。

// Storing data:
1. myObj = {name: "John", age: 31, city: "New York"};
2. myJSON = JSON.stringify(myObj);
3. localStorage.setItem("testJSON", myJSON);

// Retrieving data:
4. text = localStorage.getItem("testJSON");
5. obj = JSON.parse(text);
6. document.getElementById("demo").innerHTML = obj.name;

我知道第一行在存储变量。我假设第二行是把变量转化为字符串。如果这不正确，请告诉我。 我不知道第三行是什么意思，有人能解释一下吗？ 第四行和第五行也让我困惑。 第六行容易理解。 总之，第2、3、4、5行分别是做什么的？

- Yosharu

---

MDN是一个更好的学习资源：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON - Davide Vitali

同意Davide的观点 - 请查看MDN - https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage，https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify，https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse。 - DaveStSomeWhere

你甚至可以参考 https://www.w3schools.com/html/html5_webstorage.asp。 - Subhendu Kundu

Answer 1

我会逐行进行解释。

保存

1. myObj = {name: "John", age: 31, city: "New York"};
   • 这行代码创建一个对象。
2. myJSON = JSON.stringify(myObj);
   • 这行代码将javascript对象转换为可由任何接受JSON的应用程序使用的JSON字符串。
3. localStorage.setItem("testJSON", myJSON);
   • 现代浏览器有一个localStorage API，可以让你在浏览器中存储数据。这行代码将该JSON字符串存储在localStorage中以供以后使用。

检索

4. text = localStorage.getItem("testJSON");
   • 这行代码正在检索存储的JSON字符串。
5. obj = JSON.parse(text);
   • 这行代码将检索到的JSON字符串解析回Javascript对象。
6. document.getElementById("demo").innerHTML = obj.name;
   • 这将访问您解析的对象的name属性，并将其打印到页面上的演示元素中。

- Mat Waroff

Answer 2

我知道第一行在做什么。它只是存储变量。

是的。

我猜第二行只是把变量存储转换成字符串。

没错。

我不知道第三行的意思。

请参考MDN localStorage文档。这一行与JSON对象本身无关，只是向您展示您可以将该对象保存在 localStorage 中，并在以后再次加载该页面时使用它，这正是第4行所做的。

第5行的功能基本上与第2行相反，因此您可以给它一个具有有效 JSON 的字符串，它会返回一个正确的JS对象。

- GBrandt

Answer 3

最初的回答：

以下是解释：

这里是解释：

// Storing object with key name and city in a variable named myObj
1. myObj = {name: "John", age: 31, city: "New York"};

//Converting the myObj into a string representation called serializing/serialization
2. myJSON = JSON.stringify(myObj);

//Setting a key named testJSON in browsers localStorage
//coz You cannot store anything in localStorage except a string
3. localStorage.setItem("testJSON", myJSON);

// Retrieving data from the localStorage
4. text = localStorage.getItem("testJSON");

//Converting it back to object form from the string by parsing it
5. obj = JSON.parse(text);

//Setting the html of #demo element in dom to the name 
6. document.getElementById("demo").innerHTML = obj.name;

- Hemant Parashar

Answer 4

Window.localStorage

localStorage 是 Web Storage API 的一部分，它允许您存储一些没有过期时间的数据，就像 sessionStorage 一样。这是几乎所有现代浏览器的功能，它允许您存储键/值对以便重复使用。

localStorage.getItem() 和 localStorage.setItem() 是最常用的方法，用于检索给定键的数据，并为给定键设置数据值。

localStorage.setItem() 的典型用途是当您需要存储一些数据以供将来使用时，这样当用户刷新页面或打开其他页面时，数据不会丢失。当您需要检索存储的数据时，可以使用 localStorage.getItem()。

与 localStorage 类似，您还有 sessionStorage，它类似。唯一的区别是 sessionStorage 具有过期时间，因此最好在不想临时存储某些数据时使用它。

重要提示： 请记住，以这种方式存储数据并不安全，因此避免存储机密数据。

JSON.parse和JSON.stringify

JSON.parse用于将JSON字符串格式转换为对象，而JSON.stringify用于将对象转换为字符串。

JSON.parse的典型用途是当您从某些外部来源获取字符串时，因为字符串是存储数据的方式。它将字符串转换为一个对象，该对象可以在您的JavaScript代码中使用，以操作来自该对象的数据属性。JSON.stringify主要用于在对对象的属性进行一些操作后将数据存储为字符串。

了解更多关于Web Storage API的信息：

https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API

关于 JSON 和 JSON.stringify 和 JSON.parse 方法：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON

- Nikola Kirincic

Answer 5

• 第2行将您的对象序列化为字符串以便存储...
• ...在本地存储中，这是一种数据库（第3行）。
• 第4行要求本地存储返回先前存储的值，
• 由于它是序列化的（您将其存储在字符串中），因此必须将其解析（"转换"）为JavaScript对象以便使用它（使用JSON.parse）。

- Serge K.

Answer 6

第一行：创建一个变量对象。

第二行：将对象转换为JSON格式。

第三行：将对象存储在本地存储中，并设置其键值对。它的键名为“testJSON”。

第四行：使用键名检索localStorage。

第五行：解析数据并将其转换为对象。

第六行：将元素ID值设置为具有键“name”的对象的值。

- Willy David Jr

Answer 7

首先，请注意您所参考的教程中红色文本中的说明：“您将在本教程后面了解更多关于JSON.parse() / JSON.stringify()的内容。”

简而言之，stringify()是将json对象转换为字符串的函数。parse()是一种解析字符串的函数，以便可以从中产生输出。

- Peter Collins