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;

所以我知道第一行是什么。它只是存储变量。我假设第二行只是将变量存储转换为字符串。如果不正确，请告诉我。我不知道第三行是什么意思，所以有人可以解释一下这是怎么回事吗？

第4行和第5行也使我感到困惑。第六行很容易理解。

TLDR：第2、3、4和5行在做什么？

Answer 1

我将逐步完成每一行。

保存

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

正在检索

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

Answer 2

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

是的

我假设第二行只是将变量存储转换为字符串。

是的。

我不知道第三行是什么意思

请参阅MDN localStorage文档。该行与JSON对象本身无关，只是向您显示可以将该对象保存在localStorage上，并在以后再次加载该页面时使用它，顺便说一句，第4行 strong>确实。

第5行所做的基本上是与第2行相反的过程，因此您给它提供了一个带有有效JSON的字符串，并返回了一个正确的JS对象。

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;

Answer 4

Window.localStorage

localStorage是Web Storage API的一部分，它使您可以存储一些数据而不会过期，例如sessionStorage。这是几乎所有现代浏览器的功能，它允许您存储键/值对以重用它们。它旨在替代Cookie的某些用法

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

Answer 5

第2行将您的对象序列化为字符串以存储它...
...在local storage中是一种数据库（第3行）。
第4行要求本地存储返回先前存储的值，
在对其进行序列化（将其存储在string中）时，必须将其解析（“将其转换” ）到JavaScript对象，以便使用它（使用{{ 3}}）。

Answer 6

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

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

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

第四行：使用其密钥检索localStorage。

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

第六行：使用键“名称”在对象上设置元素id值。

Answer 7

首先，请注意本教程中所用状态用红色文本表示：“您将在本教程的后面部分了解有关JSON.parse（）/ JSON.stringify（）的更多信息。

简而言之，stringify（）是一个将json对象转换为字符串的函数。 parse（）是一个解析字符串的函数，因此可以从中产生输出。

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

7 个答案:

保存

正在检索