网络存储API为客户的浏览器提供机制，以安全地存储和轻松地访问键值对。这对于存储简单的数据，如用户名或电子邮件，以及通过存储访问和刷新令牌等数据来检查用户是否可以访问某个特定的资源是非常有用的。
我们可以使用运行在该浏览器中的JavaScript客户端代码，在客户端的浏览器上轻松查看存储的数据，因此，如果用户离开网站，随后返回，你的JS代码可以从window.localStorage ，以检索保存在其中的任何数据。
在这篇文章中，我们将研究如何将JavaScript对象串化并解析成JSON字符串，以便它们可以保存在localStorage 。我们还将学习localStorage 、sessionStorage 和cookies之间的区别，以及使用cookies而不是localStorage 的好处和缺点。
什么是localStorage ？
[LocalStorage](https://blog.logrocket.com/localstorage-javascript-complete-guide/)是一种网络存储机制，它允许我们在客户端的浏览器上存储数据，即使在浏览器窗口关闭后也会持续存在。存储在这里的数据可以在整个特定领域内被访问。例如，存储在localStorage 对象中的数据从 [http://www.example.com](http://www.example.com)的数据可以被这个域中的任何页面访问。
而且，根据w3schools的说法，"localStorage 对象存储的数据没有过期日期。浏览器关闭时，数据不会被删除，第二天、一周或一年都可以使用"。
使用sessionStorage 与localStorage 与cookies
sessionStorage 是一个网络存储API，在客户端使用，用于存储特定域的数据。它类似于window.localStorage ，但它有一个过期时间。
window.sessionStorage ，只要标签或浏览器打开，它就处于活动状态，并在页面重新加载和恢复时持续存在。当一个文件被加载到一个浏览器标签，一个新的页面会话被创建并分配给该标签。该页面会话只对该标签有效。
注意：存储在
sessionStorage的数据与该页面的协议不同。这意味着，存储在通过HTTP访问的网站上的数据与存储在通过HTTPS访问的同一网站上的数据是不同的sessionStorage对象。
localStorage 的工作原理与sessionStorage 相似，但不同的是，存储在localStorage 中的数据是持久的，对该特定域来说是永远存在的，除非浏览器的缓存被清除，或者我们使用 JavaScript 清除localStorage ，因为localStorage 数据只能由 JavaScript 操作。
注意：当最后一个私人标签关闭时，存储在以私人标签或隐身模式打开的网站的
localStorage对象中的数据会被清除。
另一方面，HTTP cookies是网站服务器创建并发送给访问网站的新用户的文本文件。当你连接时，服务器会生成保存在cookie中的信息。这些信息被贴上一个对你和你的电脑来说是独一无二的ID。
Cookie包含特定于某一用户的信息，用于识别该用户。它们保存了诸如认证信息、购物车信息等数据，以帮助实现用户的个性化体验。然而，它们可能是一个隐私噩梦，我们将在下一节中看到。
使用cookies进行网络存储
在这一节中，我们将看看在localStorage ，使用cookies的一些优点和缺点。
为什么使用cookies？
- Cookies更适合于执行与认证有关的任务。它们从浏览器的HTTP头中被发送到服务器，而不是使用
localStorage或sessionStorage，后者只被应用程序作为客户端数据存储访问。 - Cookies可以被标记为HTTP，在会话期间将XSS（跨站脚本）攻击限制在用户的浏览器上，但这并不能保证对XSS攻击完全免疫。
使用cookies的缺点
- Cookie容易受到网络攻击，被劫持的Cookie可以实现对用户浏览会话的访问。
- 第三方cookie是一个隐私噩梦。它们是由一个与你目前正在浏览的网站不同的网站创建的。它们通常与网页上的广告相连，因此访问一个有七个广告的网站可能会产生七个cookie，即使用户没有点击广告。
- 通过
localStorage，网络应用程序可以在客户端存储整个用户编写的文件，以提高性能，但cookie不能很好地处理这个问题，因为它们会随着向服务器发出的每个请求而被传送。 - cookies的存储容量只有大约4KBm，而
localStorage的容量为10MB。 - 由于cookies是以文本文件的形式存储在硬盘上的，因此会带来严重的安全风险。任何入侵者都可以轻易地打开这些文件并查看其中包含的信息
如何将JavaScript对象存储在localStorage
在处理window.localStorage 对象时，你应该熟悉以下方法：setItem 、getItem 、removeItem 、clear 、key 。
让我们看看如何使用setItem 和getItem 方法以及两个JSON方法stringify 和parse 在localStorage 对象中存储JavaScript对象。
[setItem()](https://developer.mozilla.org/en-US/docs/Web/API/Storage/setItem)-setItem方法用于向网络存储对象添加数据。它接收两个参数，即一个键和值对。window.localStorage.setItem("key", value)[getItem()](https://developer.mozilla.org/en-US/docs/Web/API/Storage/getItem)-getItem方法返回传递给它的键名的值，如window.localStorage.getItem("key name")[JSON.stringify](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify)-JSON.stringify方法将任何对象或可接受的值转换为JSON字符串。[JSON.parse](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse)-JSON.parse方法将一个字符串转换为字符串所描述的相应对象或值。
让我们看一个例子，如何使用上述方法在localStorage 中存储一个JavaScript对象。
//javascript
const myObject = {
name : "john doe",
age : 32,
gender : "male",
profession : "optician"
}
window.localStorage.setItem("myObject", JSON.stringify(myObject));
在代码块中，我们先用JSON.stringify() 方法将我们的JavaScript对象转换成字符串，因为我们只能在window.localStorage 对象中存储字符串。
如果我们试图存储一个JavaScript对象而不先将其转换为字符串，我们将得到一个[object, object] 的响应，如图所示。
[object object] 是一个对象实例的字符串表示，但它的值永远不会被读取。
现在我们需要检索我们的JavaScript对象，我们之前将其保存为JSON字符串。要做到这一点，我们需要解析这个字符串。
//javascript
let newObject = window.localStorage.getItem("myObject");
console.log(JSON.parse(newObject));
在这里，我们通过对window.localStorage 对象使用getItem 方法来检索我们之前设置的JavaScript对象，并将其保存到一个变量中。接下来，我们把这个字符串解析成一个JavaScript对象，然后把它记录到控制台。
如果我们不先解析就试图检索该对象，我们会得到一个字符串作为响应。这就是我的意思。
可以存储为JSON字符串的数据类型
有些数据类型不是JSON安全的，如果在转换过程中发现这样的值，它们要么被排除在对象中，要么被改变为数组中的null 。
原始数据类型如数字、布尔运算和字符串是JSON-安全的，而像函数、未定义、符号、日期-对象等值则不是JSON-安全的。
总结
在这篇文章中，我们了解到在window.localStorage 对象中以JSON字符串形式存储JavaScript对象的一个巧妙的技巧。我们可以通过这种方式在一个键中存储更多的用户信息。
总之，我们可以在localStorage 中存储JavaScript对象，首先用JSON.stringify 方法将其转换为字符串，然后用JSON.parse 方法将其恢复为对象。
The postStoring and retrieving JavaScript objects in localStorageappeared first onLogRocket Blog.
