JSON是谁?
JSON 是一种轻量级的文本数据格式,全称为JavaScript 对象表示法。这种格式在网络数据传输和本地存储中非常流行。此外,它还是一种独立的数据格式,可以被其他编程语言使用。
JSON 通常以两种不同的格式表示:JSON 字符串或 JSON 对象。JSON 对象与 JavaScript 对象非常相似,区别在于其键和值需要用双引号括起来。它们通常存储在.json扩展名为 .json 的文件中。
// phillip.json
{
"name": "Phillip",
"age": 29,
"languages": ["JavaScript", "Python", "C++"],
"appearance": {
"hairColor": "black",
"eyeColor": "Brown"
}
}
JSON 对象也是有效的 JavaScript 对象!
网络响应中的 JSON
调用 API 时,通常会收到 JSON 格式的响应。让我们使用 fetch 从 phillip.json 文件中获取一些数据,并将其保存到同一目录下的 JavaScript 文件中。
// index.js
fetch("./phillip.json").then(response => console.log(response)) // response object
将接收到的数据输出到控制台会得到一个 HTTP 响应对象,而不是我们想要的 JSON 数据。要获取所需内容,我们需要使用 HTTP 响应对象提供的内置 `.json()` 方法。该方法会返回一个包含 JSON 数据的 Promise 对象。
// index.js
fetch("./phillip.json")
.then(response => response.json())
.then(data => console.log(data)) // phillip object!
使用 stringify() 和 parse() 将 JSON 存储在 localStorage 中
LocalStorage 是一个便捷的存储数据(键值对)的选项,尤其适合在应用关闭后仍需保留数据的情况。你可以把它想象成一个本地数据库。但需要注意的是:对象和数组不能存储在 localStorage 中。
// Set an item and immediately get it back
fetch("./phillip.json")
.then(response => response.json())
.then(data => {
localStorage.setItem("profile", data)
localStorage.getItem("profile") // [object Object] - what is this???
});
这时, JSON.stringify()方法就派上用场了。这个方法可以将 JSON 对象转换为字符串,从而使我们能够将数据存储到 localStorage 中。
fetch("./phillip.json")
.then(response => response.json())
.then(data => {
localStorage.setItem("profile", JSON.stringify(data))
localStorage.getItem("profile") // '{"name":"Phillip","age":29,...'
});
让我们开始规划未来。最终,我们希望提取存储的 JSON 字符串并将其转换回 JSON 对象。JSON.parse ()可以帮助我们实现这一点。
...
const profile = localStorage.getItem("profile")
JSON.parse(profile) // {name: "Phillip", age: 29,...} - phillip object!
概括
以下是我们讨论过的要点列表。
- 用于在网络中传输数据的文本数据格式。
- 通常以对象或字符串的形式存在。
- 可以借助 JSON 方法存储在 localStorage 中。
- JSON.stringiy() 将 JSON 对象转换为字符串
- JSON.parse() 将 JSON 字符串转换为对象
感谢阅读!!!😄😆 希望这篇文章能帮助你对 JSON 有更深入的了解!
文章来源:https://dev.to/shimphillip/who-is-json-13h6