本地存储(Local Storage) 和 会话存储(Session Storage)

简介: 本地存储(Local Storage) 和 会话存储(Session Storage)

8.png前提知识

请按照我以下的步骤来:


1、在任意网页中按F12打开开发者工具

1.png

2、单击Application,即应用

2.png

3、单击存储,您将在那里看到本地存储和会话存储。

3.png

本地存储和会话存储都存储键值对。


本地存储和会话存储的主要区别在于,在 关闭浏览器 后,存储在 会话存储 中的键值对会丢失。



范例

现在,让我们通过一些示例来了解如何对本地存储进行操作。



示例1:将键值对提供给本地存储

localStorage.setItem('Name1', 'uiu');

控制台执行,查看效果

4.png

让我们看看本地存储的“ typeof ”:

5.png



示例2: 本地存储中设置键值对

在上面的示例中,我们看到了 如何在本地存储中设置键值对。


现在,让我们了解如何从本地存储中获取键值对。

let Name1 = localStorage.getItem('Name1')
console.log(Name1)

6.png

示例3: 获取空值

现在,让我们尝试获取一些不存在的值。

let Name2 = localStorage.getItem('Name2');
console.log(Name2)

7.png如果您尝试从不存在的本地存储中获取某些内容,则结果为 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));


9.png



示例 5:从本地存储中获取数组

从本地存储中获取数组。


10.png


上面的结果可能看起来像一个数组,但我们从本地存储而不是数组获取字符串。


让我证明一下。

11.png


因此,为了从本地存储中获取数组,我们使用 JSON.parse ,见下文。



示例 6:从本地存储中获取数组?

现在我们 JSON.parse 使用从本地存储中获取数组


console.log(JSON.parse(localStorage.getItem('favoriteProgrammingLanguage')));

12.png


因此,我们使用:


  1. JSON.stringify:将数组设置为本地存储中的值。
  2. JSON.parse:从本地存储中获取数组。


示例 7:清除本地存储

清理前

13.png


localStorage.clear()

运行后

14.png

因此,我们可以使用 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));

15.png

运行这条命令试试

localStorage.removeItem('Name1');


16.png

正如您在上面看到的,为了删除我们使用的特定键值对 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');

17.png

接下来我们关闭该网页,然后重新打开

18.png

此时会话存储的数据已经消失了,而之前示例运行的数据在本地存储中还存在


19.png

20.png



总结


让我重申一下:本地存储和会话存储之间唯一的主要区别是,一旦我们关闭浏览器,我们就会丢失会话存储中保存的任何内容。但是,本地存储并非如此。

最后,让我们看看 MDN 怎么说:


窗口界面的 localStorage 只读属性允许您访问 Document 来源的 Storage 对象;存储的数据跨浏览器会话保存。

只读 sessionStorage 属性访问当前源的会话存储对象。sessionStorage 类似于 localStorage;不同之处在于,虽然 localStorage 中的数据不会过期,但 sessionStorage 中的数据会在页面会话结束时被清除。

目录
相关文章
|
监控 前端开发 关系型数据库
|
10月前
|
缓存 监控 前端开发
在 Go 语言中实现 WebSocket 实时通信的应用,包括 WebSocket 的简介、Go 语言的优势、基本实现步骤、应用案例、注意事项及性能优化策略,旨在帮助开发者构建高效稳定的实时通信系统
本文深入探讨了在 Go 语言中实现 WebSocket 实时通信的应用,包括 WebSocket 的简介、Go 语言的优势、基本实现步骤、应用案例、注意事项及性能优化策略,旨在帮助开发者构建高效稳定的实时通信系统。
473 1
|
11月前
|
XML 前端开发 Java
JAVA调试webservice接口
JAVA调试webservice接口
310 1
|
监控 前端开发 JavaScript
Sentry 监控部署与使用(详细流程)
Sentry 监控部署与使用(详细流程)
2222 0
|
12月前
|
安全 关系型数据库 Shell
Web安全-浅析CSV注入漏洞的原理及利用
Web安全-浅析CSV注入漏洞的原理及利用
592 3
|
11月前
|
存储 安全 数据安全/隐私保护
数据传输中遇到问题要怎么解决
在数据传输中遇到问题时,可采取多种解决方案:使用可靠协议(如HTTPS、SFTP)、创建冗余备份、数据压缩与加密、错误检测与纠错、优化网络性能、解决数据丢失、降低延迟、提高安全性及解决带宽瓶颈。这些措施有助于确保数据传输的稳定、安全与高效。
|
SQL 关系型数据库 MySQL
一文带你了解MySQL的DCL语句
一文带你了解MySQL的DCL语句
730 1
|
数据可视化 数据挖掘 API
Pandas数据可视化(一)
Pandas是Python数据分析的核心库,不仅用于数据加载和转换,还内置了简单的数据可视化功能。通过`.plot()`方法,可以创建条形图、折线图、直方图和饼图等,便于单变量分析。例如,用葡萄酒数据集展示了不同产区的葡萄酒数量,加利福尼亚占比最高。条形图适合比较类别间的差异,折线图则用于显示趋势。直方图用于数值分布,但对倾斜数据(极值影响)敏感。饼图展示类别占比,但不适用于大量分类。Pandas的可视化帮助我们理解数据集的结构和特征。
|
机器学习/深度学习 监控 安全
【网安】DDoS攻击:方法、影响与防御策略
【网安】DDoS攻击:方法、影响与防御策略
1959 0
|
人工智能 供应链 安全
构建未来:区块链技术在供应链管理中的应用
随着数字化转型的不断深入,传统供应链管理面临诸多挑战。本文探讨了区块链技术如何作为一剂良方,助力供应链管理实现透明化、安全性提升与效率优化。通过分析区块链的核心特性及其在供应链中的应用场景,本文揭示了该技术如何促进信息共享,减少欺诈行为,并提高整个网络的响应速度。我们不仅讨论了实施区块链的益处,还审视了当前面临的技术挑战和未来的发展趋势。
1165 2

热门文章

最新文章