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 一般用于保存用户操作的后的某个状态(用户刷新页面或重新进入页面回显之前的操作状态)。