1. 本地存储

本地存储的方式：cookie、localStorage、sessionStorage

2. cookie

2.1 cookie是什么

• cookie：客户端与服务器端进行会话(session)使用的，一个能够在浏览器本地化存储的技术
• 作用：在浏览器存储少量数据

2.2 cookie的特点

• ① cookie是基于 http/https 协议
• ② cookie是为了解决http协议无状态而诞生 ---> http协议（超文本传输协议）：a. 无状态，对事物没有记忆；b. 断开式，短链接
• ③ cookie会随着请求发送到服务器（cookie从XX服务器来就只能发送到那个服务器）
• ④ cookie只能存储4k左右的"字符串"
• ⑤ cookie不是真正的永久存储，只能把失效时间设置很长。---> 默认失效时间（expires）为session，关闭浏览器就销毁
• ⑥ cookie默认不允许跨域，跨域要设置domain和后端配合设置Access-Control-Allow-Credentials：true

【补充】http和https的区别

2.3 cookie的使用

• ① 设置 ---> document.cookie = "XXXX=XX"

    cookie可以设置的一些属性：
    1. name=value       要保存的键值对(必写) 
    2. expires=失效时间  默认值是session表示浏览器关闭cookie销毁(可选)
    3. path=访问路径     默认为当前文件所在目录(可选)
    4. domain=访问域名   限制在该域名下访问(可选)
    5. secure           安全设置，如果设置了则必须使用https协议才可获取cookie(可选)
  

• ② 获取 ---> document.cookie

• ③ 删除 ---> 失效时间设置在现在时间或现在之前的时间

3. localStorage 和 sessionStorage

3.1 localStorage 和 sessionStorage 相同点：

① 都能储存5M大小的"字符串"；

② 都不能跨域。

3.2 localStorage 和 sessionStorage不同点：

① localStorage 永久存储，sessionStorage 关闭浏览器销毁；

② localStorage 不基于任何协议，sessionStorage 基于 http/https 协议。

3.3 localStorage的一些方法和属性

• length
• getItem（）
• setItem（）
• removeItem（）
• clear（）
• key（）

4. 增删改查（重点）

4.1 cookie 实现增删改查 ---> 需要引入js-cookie库，利用Cookies.get（）,Cookies.set（）方法

4.2 localStorage 实现增删改查