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

问题描述 投票：3回答：7

我刚刚开始学习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行是做什么的？

javascript json web-storage
7个回答
4
投票

我将逐步完成每一行。

保存

  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中以供以后使用。

检索

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

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

是。

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

那是对的。

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

请参阅MDN localStorage文档。这一行与JSON对象本身无关，只是告诉你可以将该对象保存在localStorage上，并在以后再次加载该页面时使用它，这正是Line 4所做的。

第5行基本上是第2行的反向过程，所以你给它一个带有效JSON的字符串，它返回一个合适的JS对象。

2
投票

这是解释：

// 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;
0
投票
  • 第2行将您的对象序列化为字符串以便存储它...
  • ...在local storage中有哪种数据库（第3行）。
  • 第4行要求本地存储返回先前存储的值，
  • 因为它是序列化的（你将它存储在string中），你必须解析它（“转换它”）到JavaScript对象才能使用它（使用JSON.parse）。
0
投票

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

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

第三行：将对象存储在localstorage上并设置其键值对。它的关键名为“testJSON”

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

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

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

0
投票

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

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

0
投票

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的典型用法是从某个外部源获取字符串，因为string是存储数据的方式。它将字符串转换为对象，可以在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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.