JavaScript中本地存储(LocalStorage)和会话存储(SessionStorage)的使用
我不会告诉你任何定义和概念，上车，读完这篇博客，你就会对本地存储(Local Storage) 和 会话存储(Session Storage)有一个清晰的认识。
前提知识
请按照我以下的步骤来：
1、在任意网页中按F12打开开发者工具
2、单击Application，即应用
3、单击存储，您将在那里看到本地存储和会话存储。
本地存储和会话存储都存储键值对。
本地存储和会话存储的主要区别在于，在 关闭浏览器 后，存储在 会话存储 中的键值对会丢失。
范例
现在，让我们通过一些示例来了解如何对本地存储进行操作。
示例1：将键值对提供给本地存储
localStorage.setItem('Name1', 'uiu');控制台执行，查看效果
让我们看看本地存储的“ typeof ”：
示例2: 本地存储中设置键值对
在上面的示例中，我们看到了 如何在本地存储中设置键值对。
现在，让我们了解如何从本地存储中获取键值对。
let Name1 = localStorage.getItem('Name1')
console.log(Name1)
示例3: 获取空值
现在，让我们尝试获取一些不存在的值。
let Name2 = localStorage.getItem('Name2');
console.log(Name2)
如果您尝试从不存在的本地存储中获取某些内容，则结果为 null 。
很多时候我们希望将数组存储在本地存储中，因为数组很容易使用（我们有很多内置的数组方法）。
但是，本地存储的一个限制是它将数组存储为字符串。让我们看看我的意思：
// 本地存储
localStorage.setItem('WebSite', 'uiuing.com');
// 定义ProgrammingLanguage数组
let ProgrammingLanguage = ['Java', 'Python', 'JavaScript', 'GO+']
// 本地存储存储 ProgrammingLanguage数组
localStorage.setItem('favoriteProgrammingLanguage', ProgrammingLanguage);
为了克服这个问题☝️，我们使用 JSON.stringify。请看下面的实际操作
示例 4：将数组存储在本地存储中
现在我们使用 JSON.stringify 将数组存储在本地存储中
localStorage.setItem('WebSite', 'uiuing.com');
let ProgrammingLanguage = ['Java', 'Python', 'JavaScript', 'GO+']
// 这里讲原先的ProgrammingLanguage 修改为了 JSON.stringify(ProgrammingLanguage)
localStorage.setItem('favoriteProgrammingLanguage',JSON.stringify(ProgrammingLanguage));
示例 5：从本地存储中获取数组
从本地存储中获取数组。
上面的结果可能看起来像一个数组，但我们从本地存储而不是数组获取字符串。
让我证明一下。
因此，为了从本地存储中获取数组，我们使用 JSON.parse ，见下文。
示例 6：从本地存储中获取数组？
现在我们 JSON.parse 使用从本地存储中获取数组
console.log(JSON.parse(localStorage.getItem('favoriteProgrammingLanguage')));
因此，我们使用：
JSON.stringify：将数组设置为本地存储中的值。JSON.parse：从本地存储中获取数组。
示例 7：清除本地存储
清理前
localStorage.clear()
运行后
因此，我们可以使用 localStorage.clear() 来清除本地存储
仅从本地存储中删除“name1”键值对。
示例 8：仅从本地存储中删除 Name1 键值对
localStorage.setItem('Name1', 'uiu');
localStorage.setItem('WebSite', 'uiuing.com');
let ProgrammingLanguage = ['Java', 'Python', 'JavaScript', 'GO+']
localStorage.setItem('favoriteProgrammingLanguage',JSON.stringify(ProgrammingLanguage));
运行这条命令试试
localStorage.removeItem('Name1');
正如您在上面看到的，为了删除我们使用的特定键值对 localStorage.removeItem 。
会话存储
这就是关于本地存储的全部内容。
我们在 会话存储 中运行类似的操作，唯一的区别是我们 使用 sessionStorage 代替 localStorage ：
// 示例1
sessionStorage.setItem('Name1', 'uiu');
// 示例2
sessionStorage.getItem('Name1');
// 示例4
let ProgrammingLanguage = ['Java', 'Python', 'JavaScript', 'GO+']
sessionStorage.setItem('favoriteProgrammingLanguage',JSON.stringify(ProgrammingLanguage));
// 示例6
console.log(JSON.parse(sessionStorage.getItem('favoriteProgrammingLanguage')));
// 示例7
sessionStorage.clear()
// 示例8
sessionStorage.removeItem('Name1');
让我们运行一下
sessionStorage.setItem('Name1', 'uiu');
接下来我们关闭该网页，然后重新打开
此时会话存储的数据已经消失了，而之前示例运行的数据在本地存储中还存在
总结
让我重申一下：本地存储和会话存储之间唯一的主要区别是，一旦我们关闭浏览器，我们就会丢失会话存储中保存的任何内容。但是，本地存储并非如此。
最后，让我们看看 MDN 怎么说：
窗口界面的 localStorage 只读属性允许您访问 Document 来源的 Storage 对象；存储的数据跨浏览器会话保存。
只读 sessionStorage 属性访问当前源的会话存储对象。sessionStorage 类似于 localStorage；不同之处在于，虽然 localStorage 中的数据不会过期，但 sessionStorage 中的数据会在页面会话结束时被清除。
到此这篇关于JavaScript中本地存储(LocalStorage)和会话存储(SessionStorage)的使用的文章就介绍到这了,更多相关JavaScript本地存储和会话存储内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
今天小编就为大家分享一篇在Layui中实现开关按钮的效果实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要为大家详细介绍了js canvas实现飞机大战，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
这篇文章主要为大家详细介绍了bootstrap suggest js下拉框的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
倒计时是指从一个固定的时间开始,向前推算一段时间,来计算目标时间或剩余时间的过程,本文主要介绍了小程序实现倒计时组件的使用示例,具有一定的参考价值,感兴趣的可以了解一下2023-09-09
这篇文章主要介绍了微信小程序吸底区域适配iPhoneX的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
基于小程序请求接口wx.request封装的类axios请求
这篇文章主要介绍了基于小程序请求接口wx.request封装的类axios请求，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
电子签名通俗来说就是通过技术手段实现在电子文档上加载电子形式的签名,下面这篇文章主要给大家介绍了关于前端实现电子签名(web、移动端)通用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-12-12
本文主要介绍了js中new一个对象的过程。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
今天小编就为大家分享一篇关于js中事件对象和事件委托的介绍，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
这篇文章主要为大家详细介绍了小程序实现计时器小功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-09-09
最新评论