- f12检查您所在的任何页面。
- 单击应用程序。
- 单击存储，您将在那里看到本地存储和会话存储。
image.png
本地存储和会话存储都存储键值对
本地存储和会话存储的主要区别在于，在关闭浏览器后，存储在会话存储中的键值对会丢失。
现在，让我们通过一些示例来了解如何对本地存储进行操作。
示例1：将键值对提供给本地存储。
localStorage.setItem("name", 'Rajat');
localStorage
在上面的示例中，我们看到了如何在本地存储中设置键值对。现在，让我们了解如何从本地存储中获取项目。
示例 2：
let name = localStorage.getItem('name')
console.log(name)
image.png
现在，让我们尝试获取一些不存在的值。
示例 3：
let name = localStorage.getItem('name2')
console.log(name)
image.png
如果您尝试从不存在的本地存储中获取某些内容，则结果为 null。
很多时候我们希望将数组存储在本地存储中，因为数组很容易使用（我们有很多内置的数组方法）。但是，本地存储的一个限制是它将数组存储为字符串。
localStorage.setItem('name', 'Rajat');
let fruitsArray = ['Apple', 'Banana', 'Orange', 'Grapes', 'Mango']
localStorage.setItem('imArray', fruitsArray);
image.png
为了克服这个问题☝️，我们使用 JSON.stringify。请看下面的实际操作：
示例 4：将数组存储在本地存储中：
localStorage.setItem('name', 'Rajat');
let fruitsArray = ['Apple', 'Banana', 'Orange', 'Grapes', 'Mango']
localStorage.setItem('imArray', JSON.stringify(fruitsArray));
image.png
示例 5：从本地存储中获取数组。
console.log(localStorage.getItem('imArray'));
image.png
上面的结果可能看起来像一个数组，但我们从本地存储而不是数组获取字符串。让我证明一下。
console.log(typeof localStorage.getItem('imArray'));
image.png
因此，为了从本地存储中获取数组，我们使用 JSON.parse。见下文。
示例 6：从本地存储中获取数组？
console.log(JSON.parse(localStorage.getItem('imArray')));
因此，我们使用：
- JSON.stringify：将数组设置为本地存储中的值。
- JSON.parse：从本地存储中获取数组。
示例 7：清除本地存储。
localStorage.setItem('Name1', 'Rajat');
let fruitsArray = ['Apple', 'Banana', 'Orange', 'Grapes', 'Mango']
localStorage.setItem('impArray', JSON.stringify(fruitsArray));
localStorage.clear()
因此，我们可以使用localStorage.clear().
示例 8：仅从本地存储中删除“name”键值对。
localStorage.setItem('name', 'Rajat');
let fruitsArray = ['Apple', 'Banana', 'Orange', 'Grapes', 'Mango']
localStorage.setItem('imArray', JSON.stringify(fruitsArray));
localStorage.removeItem('name');
image.png
正如您在上面看到的，为了删除我们使用的特定键值对localStorage.removeItem。
这就是关于本地存储的全部内容。
我们在会话存储中运行类似的操作，唯一的区别是我们使用会话存储代替本地存储：
sessionStorage.setItem("name, 'Rajat');
sessionStorage.getItem("name");
sessionStorage.setItem('imArray', JSON.stringify(fruitsArray));
console.log(JSON.parse(sessionStorage.getItem('imArray')));
sessionStorage.clear()
sessionStorage.removeItem('Name1');
让我重申一下：本地存储和会话存储之间唯一的主要区别是，一旦我们关闭浏览器，我们就会丢失会话存储中保存的任何内容。但是，本地存储并非如此。
最后，让我们看看 MDN 怎么说：
window的 localStorage 只读属性允许您访问 Document 来源的 Storage 对象；存储的数据跨浏览器会话保存。
只读 sessionStorage 属性访问当前源的会话存储对象。sessionStorage 类似于 localStorage；不同之处在于，虽然 localStorage 中的数据不会过期，但 sessionStorage 中的数据会在页面会话结束时被清除。
网友评论