Vue中存储Tok的方法全解析_容量大_缺点- 容量有限通常只有4KB
Vue中存储Token的方法全解析
一、使用本地存储（Local Storage）
本地存储就像一个持久的大柜子，即使你关上了浏览器，里面的东西也不会跑掉，非常适合那些需要长期存放的数据。优点：
- 持久化：浏览器关闭后数据依然在。 - 容量大：通常有5MB的空间。缺点：
- 安全性低：容易受到恶意脚本的攻击。步骤：
- 存储Token：`localStorage.setItem('token', value);`
- 读取Token：`localStorage.getItem('token');`
- 删除Token：`localStorage.removeItem('token');`
二、使用会话存储（Session Storage）
会话存储就像临时存放的东西，一旦浏览器窗口关闭，里面的东西就消失了，适合存放那些临时的数据。优点：
- 临时有效：浏览器关闭后数据自动消失。 - 安全性高：适合存放敏感数据。缺点：
- 数据丢失：会话结束后数据就没了。步骤：
- 存储Token：`sessionStorage.setItem('token', value);`
- 读取Token：`sessionStorage.getItem('token');`
- 删除Token：`sessionStorage.removeItem('token');`
三、使用Vuex状态管理
Vuex就像一个超级大脑，专门用来管理应用程序中的共享状态，特别适合大型应用。优点：
- 集中管理：便于维护和调试。 - 大型应用友好。缺点：
- 学习成本高：需要额外学习和配置。 - 数据在内存中：刷新页面数据丢失。步骤：
- 安装Vuex：`npm install vuex`
- 配置Vuex：创建store.js
- 使用Vuex存储Token：在state中添加token，在mutations中添加操作token的方法
- 读取Token：通过getters获取token
- 删除Token：通过mutations修改state中的token
四、使用Cookies
Cookies就像小饼干，可以在客户端和服务器之间传递数据，非常适合跨请求的数据存储。优点：
- 可设置过期时间：适合持久化存储。 - 服务器端操作：适合服务器端验证。缺点：
- 容量有限：通常只有4KB。 - 安全性低：容易受到恶意脚本的攻击。步骤：
- 安装js-cookie库：`npm install js-cookie`
- 使用Cookies存储Token：`Cookies.set('token', value);`