1. 背景

在项目开发中，希望前端能够保存一部分值，可以减少接口请求/减少获取值的逻辑。前端项目中一般会把数据存储在cookie,vuex,localStorage,sessionStorage这几个地方。在下文中会详细介绍下以下几种缓存以及差异。

2. cookie

cookie是什么

cookie是服务器发送到用户浏览器并保存的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。

cookie用来做什么

• 会话状态管理
• 个性化设置
• 浏览器行为跟踪

cookie常见操作

1. set-cookie

• 创建cookie的两种方式：服务器设置cookie/客户端创建cookie
• 设置cookie遵循规则：

Set-Cookie: value[; expires=date][; domain=domain][; path=path][; secure]

• 关于编码问题：原始规范指出只对三个字符必须编码,分号、逗号、空格
• 通过js操作设置cookie

document.cookie = name + "=" + encodeURIComponent(value) + ";expires=" + exp.toGMTString()+";path=/;domain=domain"; 

2. 获取cookie的值

get(key) {
        var query = new RegExp('(^| )' + key + '=([^&=]+)(;|$)');
        var data = document.cookie.match(query);
        if (data) {
            return decodeURIComponent(data[2]);
        }
    },

3. 删除cookie的值

• 给cookie设置一个空值，且是设置一个过去任一时间;
• 常见的坑：如果父域名和子域名同时能够访问cookie，在子域名能够清除的cookie的时候，如果不指定删除的path,则会默认清楚当前站点路径下cookie。如在子域名清除cookie的时候，其实清除的是父域名。

document.cookie = "userId=; expires=过期时间;path=/"

4. cookie的属性

• Domain:域名
• Path：所在路径
• Expires：过期时间
• httpOnly:通过js创建不能包含httpOnly属性,document.cookie也无法获取含该属性的cookie
• SameSite:用来限制在跨站点调用时,第三方 Cookie的使用策略，从而减少安全风险。
• • None(默认):不做限制
  • Strict:严格模式，必须是同站点
  • Lax:宽松模式

5. cookie存储大小:4K

6. cookie和session有什么关系

session一样是存储服务状态信息，由服务器端维护，session执行的sessionId会发给 客户端，客户端每次请求都会把sessionId放到http请求头部发送给服务端。这个sessionId保存容器存放在客户端的cookie中

3.Web Storage API

sessionStorage和localStorage

存储对象是简单的键值存储，类似于对象。storage.getItem(),storage.setItem()

常用操作

• storage.removeItem()
• storage.clear()

二者区别：

• sessionStorage: 即只要浏览器处于打开状态，包括页面重新加载和恢复，数据依然存在
• localStorage： 同样的功能，但是在浏览器关闭，然后重新打开后数据仍然存在，需要用户手动删除

4. vuex

基本属性

• State:单一状态数，存储应用值
• Getter：用于获取state中数据的函数
• Mutation:同步修改state中的某个值
• Action:支持异步修改state的值，通过
• Modules:模块化vuex

页面刷新存储数据清空