jwt 本地存储的三种方式

XWenXiang

已于 2022-07-06 19:21:49 修改

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签：前端 vue.js javascript

于 2022-07-02 13:55:40 首次发布

本文链接：https://blog.csdn.net/m0_58987515/article/details/125572218

Vue 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了前端存储技术，包括Cookies、sessionStorage与localStorage的区别及应用场景。Cookies适用于短期存储且带有过期时间；sessionStorage用于单次会话存储，在浏览器关闭后清空；而localStorage则为长期存储，即使浏览器关闭数据依然保留。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

1. 简介

jwt 即对用户登录状态的一种标识，需要带着返回的 token 来向后端发起请求，后端服务器根据 token 进行判断是否正确、过期来判断用户的状态，进而决定是否向前端发送数据。

这里记录一下前端如何对 token 或者其他数据进行存储。

2. Cookies

数据会放到客户端浏览器的 cookie 中，有过期时间。使用步骤如下

安装

cnpm install vue-cookies -S

在 main.js 中全局引入

import cookies from 'vue-cookies'
Vue.prototype.$cookies=cookies

使用

this.$cookies.set('key','value', 100)	# 设置 token，100 表示过期时间为10秒
this.$cookies.get('key')				# 获取 token
this.$cookies.remove('key')				# 删除 token

3. sessionStorage

属于本地存储，放在客户端浏览器的会话存储中，没有过期时间，浏览器关闭后便失效

// 数据的保存
sessionStorage.setItem('key', 'value')
sessionStorage.id = id
sessionStorage.token = token

// 数据的读取访问
sessionStorage.getItem('key')
sessionStorage.token

// 清除所有记录
sessionStorage.clear()
// 清除单个记录
sessionStorage.removeItem("token");

4. localStorage

放在客户端浏览器的会话存储中，没有过期时间。属于本地存储，长期有效，浏览器关闭之后也有效。

用法与上面类似

// 数据的保存
localStorage.setItem('key', 'value')
localStorage.id = id
localStorage.token = token

// 数据的读取访问
localStorage.getItem('key')
localStorage.token

// 清楚所有记录
localStorage.clear()

// 清除单个记录
localStorage.removeItem("token");