Vue28 Web Storage

https://www.jianshu.com/p/513f6949fc25

1 简介

　　Web Storage 包括 localStorage 和 sessionStorage ，是浏览器本地数据存储的另一个方案，最开始提出来是为了弥补 Cookie 本地化数据存储的缺陷（存储量小、每次请求都会携带 Cookie 加大了额外的开销等）。localStorage 和 sessionStorage 两个对象都可以通过浏览器 window 对象访问到。它们保存的数据都是以键值对（key-value）的形式存在的

 

2 localStorage

2.1 简介

　　通过 window 的 localStorage 属性可以访问到当前页面的一个对象（Storage），这个对象是当前源（window.location.origin）保存的浏览器会话数据，它保存的数据是持久化的会长期保留，即使你关闭浏览器下次重新打开该页面，保存的数据依然还在不会被清空。而且在相同源（window.location.origin）的其他页面都是可以通过 localStorage 访问到，当然了源与源之间的 localStorage 是不能互相访问的。即每个源之间的 localStorage 是相互独立的

2.2 获取localStorage 对象

let data = window.localStorage
// 在浏览器环境下也可以省略 window
let data2 = localStorage

2.3 在localStorage中存储数据

localStorage.setItem('username','frontEndCoderZ')

2.4 访问localStorage中的数据

localStorage.setItem('username','frontEndCoderZ')
let username = localStorage.getItem('username')
console.log(username); // frontEndCoderZ

2.5 删除localStorage数据

localStorage.setItem('username','frontEndCoderZ')
localStorage.removeItem('username')

2.6 清空localStorage数据

localStorage.clear();

3 sessionStorage

　　与 localStorage 类似，它也是个 Storage 对象，不同之处在于 sessionStorage 有它的生命周期，不是长期保存的。在一个会话结束时(关闭浏览器/关闭浏览器页面标签 tab)，sessionStorage里面的相关数据就会被清空。

　　它的api和localStorage完全一致

4 小结

　　Web Storage 分为 localStorage 和 sessionStorage, 是本地化数据储存的另一个方案（弥补 Cookie 的不足），它被保存在本地，不会被浏览器携带至服务器（Cookie 会）。Cookie 存储的大小限制一般是不会超过 4kb（浏览器不同会有差异），Web Storage 一般能存储 5MB 左右。使用场景也不同，Cookie 一般用于安全验证（如用户验证信息会被携带至服务器），Web storage 一般用于保存用户操作的后的某个状态（用户刷新页面或重新进入页面回显之前的操作状态）。