三种本地存储方案

本地存储分为三种：cookie、localStorage、sessionStorage

存储方案

cookie

cookie是早期本地存储的一种方式

document.cookie

特点：

1. 内存比较小，大概4kb左右

2. 数据会一直被发送到服务器中去，容易存在安全隐患

3. 数据保存有有效期

localStorage

localStorage永久本地存储，基于浏览器进行数据存储，只要不主动清除数据，那么数据则会被永久保存

特点：

1. 内存最少5mb

2. 数据不会主动发送到服务器，不容易存在安全隐患

3. 始终有效，即使浏览器或窗口关闭也保存

sessionStorage

sessionStorage窗口本地存储，基于浏览器窗口进行存储，只要浏览器的窗口被关闭，则数据被清除

特点：

1. 内存最少5mb

2. 数据不会主动发送到服务器，不容易存在安全隐患

3. 在当前浏览器窗口关闭前有效

API方法

sessionStorage和localStorage都是H5新增的本地存储方法，可以使用API对数据进行操作

语法	含义
.setItem("键名","属性值")	存储数据到本地
.getItem("键名")	获取指定属性值
.removeItem("键名")	删除指定键值对
.clear()	一键清空

注意：

1. sessionStorage和localStorage仅支持存储字符串格式的数据
2. 如果需要存储对象等，可以使用JSON.Stringify将对象转换成字符串进行存储
3. 再从本地获取该字符串数据后，同样可以通过JSON.parse转换成对象格式进行使用

// 将对象转换成字符串
let str = JSON.stringify(obj)
console.log(str)
// 将字符串转换成数组
let arr = JSON.parse(str)
console.log(arr)

区别

区别	cookie	sessionStorage	localStorage
存储大小	4kb左右	最少5mb	最少5mb
数据有效期	在设置的过期时间之前有效，即使关闭窗口或浏览器	在当前浏览器窗口关闭前有效	始终有效，即使浏览器或窗口关闭也保存
作用域	在所有同源窗口中共享	不在不同的浏览器窗口中共享，即使是同一个页面	在所有同源窗口中共享
安全性	cookie数据始终在同源的http请求中携带，在浏览器和服务器之间来回传递，容易存在安全隐患	数据不会主动发送到服务器，不容易存在安全隐患	数据不会主动发送到服务器，不容易存在安全隐患