前端新能优化篇之localStorage和sessionStorage的区别及其使用方式

4,641 阅读2分钟

本人已参与「新人创作礼」活动,一起开启掘金创作之路。

localStorage 和sessionStorage的相同点

localStorage和sessionStorage这两个都是用于存储客户端数据的。 也被称为前端缓存或webStorage。

localStorage和sessionStorage的存储大小都是5M。

localStorage和sessionStorage都只能存储字符串类型数据。

localStorage 和sessionStorage的区别

是否可以跨页面通讯

sessionStorage

使用sessionStorage缓存的数据不可进行跨页面通讯,因为sessionStorage的生命周期是基于浏览器页面的。

sessionStorage↓

image.png

注意: 不过同一个页面下嵌套的iframe属于同源。同页面下的iframe之间可以进行通讯。

localStorage

使用localStorage缓存的数据可以进行跨页面通讯。一个窗口存储的数据在另一个窗口可以拿到。

localStorage👇

image.png

是否会随着浏览器关闭而清除

sessionStorgae存储的数据在页面被关闭以后会自动被清除不会保留。

localStorage存储的数据除非我们手动清除,否则一直存在。

localStorage和sessionStorage的应用场景

最常用的就是登录信息了。localStorage的话比较适合长期有效的自动登录。

sessionStorage比较适用于短期有效的自动登录(比如token过期重新请求)。

注意:在适用sessionStorage和localStorage的时候,存储的敏感数据(比如账号密码)最好都加密一下。

在浏览器的“应用程序”里是可以看到的↓ image.png

sessionStorgae和localStorage的使用方式

sessionStorage

存储
sessionStorage.setItem("key","val");
读取
sessionStorage.getItem("key","val");
删除指定键
sessionStorage.removeItem("key","val");
删除全部
sessionStorage.clear();

localStorage

存储
localStorage.setItem("key","val");
读取
localStorage.getItem("key","val");
删除指定键
localStorage.removeItem("key","val");
删除全部
localStorage.clear();

结论

  • localStorage可以跨页面通讯。sessionStorage不可以跨页面通讯
  • localStorage不会随着页面关闭而被清除,他只能手动清除。sessionStorage会随着页面的关闭而清除。
  • localStorage和sessionStorage的存储大小都是5M。
欢迎技术沟通,摸鱼聊天~

备注来自掘金~

wx:XXF1096032096