小编给大家分享一下javascript中本地存储和会话存储怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!前提知识请按照我以下的步骤来:在任意网页中按F12打
小编给大家分享一下javascript中本地存储和会话存储怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
请按照我以下的步骤来:
单击Application,即应用
单击存储,您将在那里看到本地存储和会话存储。
本地存储和会话存储都存储键值对。
本地存储和会话存储的主要区别在于,在 关闭浏览器
后,存储在 会话存储
中的键值对会丢失。
现在,让我们通过一些示例来了解如何对本地存储进行操作。
localStorage.setItem('Name1', 'uiu');
控制台执行,查看效果
让我们看看本地存储的“ typeof ”:
在上面的示例中,我们看到了 如何在本地存储中设置键值对。
现在,让我们了解如何从本地存储中获取键值对。
let Name1 = localStorage.getItem('Name1')console.log(Name1)
现在,让我们尝试获取一些不存在的值。
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
。请看下面的实际操作
现在我们使用 jsON.stringify
将数组存储在本地存储中
localStorage.setItem('WebSite', 'uiuing.com');let ProgrammingLanguage = ['Java', 'Python', 'JavaScript', 'GO+']// 这里讲原先的ProgrammingLanguage 修改为了 JSON.stringify(ProgrammingLanguage)localStorage.setItem('favoriteProgrammingLanguage',JSON.stringify(ProgrammingLanguage));
从本地存储中获取数组。
上面的结果可能看起来像一个数组,但我们从本地存储而不是数组获取字符串。
让我证明一下。
因此,为了从本地存储中获取数组,我们使用 JSON.parse
,见下文。
现在我们 JSON.parse
使用从本地存储中获取数组
console.log(JSON.parse(localStorage.getItem('favoriteProgrammingLanguage')));
因此,我们使用:
JSON.stringify:将数组设置为本地存储中的值。JSON.parse:从本地存储中获取数组。
清理前
localStorage.clear()
运行后
因此,我们可以使用 localStorage.clear()
来清除本地存储
仅从本地存储中删除“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
:
// 示例1sessionStorage.setItem('Name1', 'uiu');// 示例2sessionStorage.getItem('Name1');// 示例4let ProgrammingLanguage = ['Java', 'Python', 'JavaScript', 'GO+']sessionStorage.setItem('favoriteProgrammingLanguage',JSON.stringify(ProgrammingLanguage));// 示例6console.log(JSON.parse(sessionStorage.getItem('favoriteProgrammingLanguage')));// 示例7sessionStorage.clear()// 示例8sessionStorage.removeItem('Name1');
让我们运行一下
sessionStorage.setItem('Name1', 'uiu');
接下来我们关闭该网页,然后重新打开
此时会话存储的数据已经消失了,而之前示例运行的数据在本地存储中还存在
以上是“JavaScript中本地存储和会话存储怎么用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网精选频道!
--结束END--
本文标题: JavaScript中本地存储和会话存储怎么用
本文链接: https://www.lsjlt.com/news/325297.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-10
2024-05-10
2024-05-10
2024-05-10
2024-05-10
2024-05-10
2024-05-10
2024-05-10
2024-05-10
2024-05-10
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0