localStorage和sessionStorage的使用和区别

简介: localStorage和sessionStorage的使用和区别

1:localStroage

1-1:let a = 'aaaa'

localStorage设置数据:localStorage.setItem('username',a)

a530d10a29a540a8967a647ec964f14a.png

1-2:localStorage获取数据:localStorage.getItem('username')

413f1fcab0d548ce8c03afb6e738d1d2.png

fac85cca3bac4ce5ae15afc28ba220a5.png

1-3:localStorage删除数据:localStorage.removeItem('username')

35f563a10bd8496684271a95bae01413.png

ad21d55a9f71411fa949e1b5cdb7c62e.png

1-4: localStorage清除全部数据:window.localStorage.clear()

0f8284cd677a49718d1c3d8a1a59161f.png

49c7d729d649474aab88d08709c29e16.png


46161c4b6fc44da297537dc6acdbfef1.png

467a86c83c884d2f8949b20f00c66419.png

2:sessionStorage

2-1:let q = '你好'

sessionStorage设置数据:sessionStorage.setItem('password',q)

7c3ff0b0921e443191bc477d28e7bd19.png

2-2:sessionStorage获取数据:sessionStorage.getItem('password')

41bec3bed3254927b6bbd14699b707a1.png

93e4a65706b040b6bbca9d0f736d4cc0.png

2-3:sessionStorage删除数据:sessionStorage.removeItem('password')

b9fc37248d29409f94f6be5d0975f7d2.png

6805228f2e2f4891a56e4038ab5e019a.png

2-4:sessionStorage清除所有数据:window.sessionStorage.clear()

e2d9df1a221e4cd9aff0d9d19193625f.png

4975414b3c7b4dd5b952f8f7a8c82118.png


982d83dc8c104b0e85f4ff7fc46913d7.png

d7625c257f9d437bb768c47a321da82f.png

3:在存储数组的时候需要通过转成JSON的格式

               存数组:localStorage.getItem('名',JSON.stringify(键名))

               取数组:JSON.parse(localStorage.getItem('键名'))

2b4b502e8b704a78bd260c2df8f3fdf2.png

2a77b6254c434ad3b262b054f531a5dd.png

78bfb5b5020d428c82afdf6baf294488.png

sessionStorage和localStorage一致

21705018302046ee889541789d4fe000.png

287090afef2f45c5bf7d5c9b53711b73.png

4:localStorage和sessionStorage的区别:

    localStorage是永久存储在浏览器中,只要当用户不删除数据,则该数据就会一直存放在localStorage中

      sessionStorage是会话级别的存储,从名字session我们就可以看出来了,也就是当用户关闭浏览器,此时数据就会被销毁

相关文章
|
Kubernetes Cloud Native 应用服务中间件
云原生|kubernetes 你真的学废了吗---实战k8s 一(jsonpath实战)
云原生|kubernetes 你真的学废了吗---实战k8s 一(jsonpath实战)
241 1
|
数据可视化 数据挖掘 BI
数据可视化工具
【5月更文挑战第18天】数据可视化工具
390 7
|
前端开发 JavaScript 流计算
canvas系列教程05 ——交互、动画
canvas系列教程05 ——交互、动画
165 0
|
存储 移动开发 JavaScript
JS三种常见的存储机制
JS三种常见的存储机制
326 1
|
存储 C# 开发工具
22.C# 中使用变量记录玩家创建的角色名:实现与游戏角色的互动
22.C# 中使用变量记录玩家创建的角色名:实现与游戏角色的互动
227 0
|
测试技术 数据库
测试用例如何写
测试用例如何写
128 2
|
安全 Android开发
[笔记]安卓逆向之动态调试
[笔记]安卓逆向之动态调试
282 0
|
前端开发
纯Html CSS实现云雨动画效果
纯Html CSS实现云雨动画效果
纯Html CSS实现云雨动画效果
|
存储 数据采集 Web App开发
【前端】localStorage与sessionStorage的使用和区别
localStorage与sessionStorage的使用和区别
432 0
【前端】localStorage与sessionStorage的使用和区别
|
SpringCloudAlibaba 负载均衡 Cloud Native
【云原生】Spring Cloud Alibaba 之 Gateway 服务网关实战开发
Spring Cloud Alibaba Gateway 新一代服务网关 实战开发!
2467 0
【云原生】Spring Cloud Alibaba 之 Gateway 服务网关实战开发