localStorage 和 sessionStorage 的相同点
localStorage 和 sessionStorage这两个都是用于存储客户端数据的。 也被称为前端缓存或 webStorage。
localStorage 和 sessionStorage 的存储大小都是 5M。
localStorage 和 sessionStorage 都只能存储字符串类型数据。
localStorage 和 sessionStorage 的区别
是否可以跨页面通讯
sessionStorage
使用 sessionStorage 缓存的数据不可进行跨页面通讯，因为 sessionStorage 的生命周期是基于浏览器页面的。
sessionStorage↓
注意： 不过同一个页面下嵌套的 iframe 属于同源。同页面下的 iframe 之间可以进行通讯。
localStorage
使用 localStorage 缓存的数据可以进行跨页面通讯。一个窗口存储的数据在另一个窗口可以拿到。
localStorage👇
是否会随着浏览器关闭而清除
sessionStorgae 存储的数据在页面被关闭以后会自动被清除不会保留。
localStorage 存储的数据除非我们手动清除，否则一直存在。
localStorage 和 sessionStorage 的应用场景
最常用的就是登录信息了。localStorage 的话比较适合长期有效的自动登录。
sessionStorage 比较适用于短期有效的自动登录（比如 token 过期重新请求）。
注意：在适用 sessionStorage 和 localStorage 的时候，存储的敏感数据（比如账号密码）最好都加密一下。
在浏览器的“应用程序”里是可以看到的 ↓ 
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。
来自