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我们就可以看出来了,也就是当用户关闭浏览器,此时数据就会被销毁

相关文章
|
6月前
|
存储
存储对象sessionStorage与localStorage
存储对象sessionStorage与localStorage
58 0
|
6月前
|
存储 缓存 JavaScript
cookie、localStorage 和SessionStorage的区别和特点?
cookie、localStorage 和SessionStorage的区别和特点?
79 0
|
2月前
|
存储 移动开发 HTML5
SessionStorage 和 LocalStorage 有什么区别?
SessionStorage 和 LocalStorage 有什么区别?
169 3
|
1月前
|
存储 移动开发 数据管理
localStorage 和 sessionStorage 的相同与不同
`localStorage` 和 `sessionStorage` 是 HTML5 提供的两种 Web 存储机制,用于在用户的浏览器中存储数据。它们都采用键值对形式存储字符串数据,并遵循同源策略,容量约为 5-10 MB。两者均支持 `setItem`、`getItem` 等方法。主要区别在于存储期限和作用域:`localStorage` 数据持久化,适用于用户偏好设置等长期存储;`sessionStorage` 数据仅限当前会话,适用于表单信息等临时数据。根据需求选择合适的存储方式可提升用户体验和数据管理效率。
|
2月前
|
存储 数据采集 JSON
cookies sessionStorage和localstorage
cookies sessionStorage和localstorage
31 3
|
存储 移动开发 负载均衡
晨兴夜寐:这一次,彻底搞懂Cookie,LocalStorage,SessionStorage
晨兴夜寐:这一次,彻底搞懂Cookie,LocalStorage,SessionStorage
1265 0
|
6月前
|
存储 缓存 移动开发
localstorage是什么
localstorage是什么
125 1
|
6月前
|
存储 缓存 前端开发
localStorage
localStorage 是一种浏览器本地存储技术,它可以在用户浏览器中存储数据,包括文本、图像、文件等等。相比于会话存储(sessionStorage),localStorage 的存储时间更长,可以跨多个会话保持数据。因此,localStorage 常常用于存储一些长时间需要保留的数据,例如用户设置、偏好、登录状态等等。 使用 localStorag
73 8
|
6月前
|
存储 JSON JavaScript
sessionStorage
sessionStorage 是一种浏览器本地存储技术,用于在会话期间存储数据。与 cookies 相比,sessionStorage 的优势在于它不会随每次 HTTP 请求自动发送,而是仅在需要时由 JavaScript 访问。这意味着 sessionStorage 更加安全和隐私,因为它不会泄露敏感信息。
70 5
|
存储 前端开发
cookie、localStorage和sessionStorage三者的区别
cookie、localStorage和sessionStorage三者的区别
150 0