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;

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

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

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

Answer 1

Window.localStorage

localStorage 是 Web Storage API 的一部分，它允许您像 sessionStorage 一样存储一些不会过期的数据。这是几乎所有现代浏览器的功能，它允许您存储 key/value 对以便重用它们。它旨在替代某些 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 主要用于在对对象的属性进行一些操作后将数据存储为字符串。

查看有关网络存储的更多信息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 2

第 2 行将您的对象序列化为字符串以便存储它...
...在local storage里面对数据库进行排序（第3行）。
第 4 行要求本地存储 return 先前存储的值，
因为它是序列化的（你将它存储在string中），你必须将它解析（"convert it"）到JavaScript对象以便使用它（使用 JSON.parse）。

Answer 3

So I know what line one is. It's just storing the variables

是的。

I'm going to assume line two is just turning the variable storage into a string.

没错。

I have no idea what line three means

参考 MDN localStorage 文档。这一行与 JSON 对象本身无关，只是向您展示了您可以将该对象保存在 localStorage 上并在稍后再次加载该页面时使用它，顺便说一句，这正是 第 4 行 是。

第 5 行 所做的基本上是 第 2 行 的逆过程，所以你给它一个有效的字符串 JSON 并且它 returns 是一个合适的 JS 对象。

Answer 4

解释如下：

// 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 5

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

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

第三行：将对象存储到localstorage，并设置其键值对。它的键名为 "testJSON"

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

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

第 6 行：使用键 "name".

设置对象上的元素 ID 值

Answer 6

我将运行一步一步地检查每一行。

节省

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

正在检索

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

Answer 7

首先，请注意您所指的教程中红色文本“您将在本教程后面了解有关 JSON.parse() / JSON.stringify() 的更多信息。

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

JSON 让我困惑的例子 - 关于 JSON.parse、JSON.stringify、localStorage.setItem 和 localStorage.getItem

JSON example confusing me - about JSON.parse, JSON.stringify, localStorage.setItem and localStorage.getItem

javascript

json

web-storage

节省

正在检索