JWT学习笔记,cookie、localStorage 和 sessionStorage的区别

参考资料:

SpringBoot搭建教程

SpringCloud搭建教程

JWT视频教程

JWT官网

Vue视频教程

JWT视频参考资料、VUE视频资料,及前后端demo

特别有参考价值的JWT博客1

特别有参考价值的JWT博客2

cookie、localstorage和sessionStorage的区别1

cookie、localstorage和sessionStorage的区别2

cookie、localstorage和sessionStorage的区别3

VUE之基本部署及VScode常用插件

VUE之基本组成和使用

VUE之Bootstrap和Element-UI的使用

VUE之axios使用,跨域问题,拦截器添加Token

VUE之VueRouter页面跳转

VUE之JWT前后端分离认证,学生管理系统


cookie、localStorage 和 sessionStorage的区别:

  • 详细信息可以参照上述相关链接,这里仅对常用到的点进行区别
1.cookie和storage的区别
  • cookie是存储在浏览器中,主动参与http传输的技术
  • localStorage和SessionStorage同样存储在浏览器中,但是并不主动参与http传输,需要手动添加到http中才行
  • 所以,cookie相对较小,localStorage和SessionStorage可以很大
2.localstorage和sessionstorage
  • localstorage是本地存储,只要你的浏览器没有被卸载。这个数据库都是存在的。

    sessionstorage是会话存储,

    首先第一点,页面会话在浏览器打开期间一直保持,并且重新加载或恢复页面仍会保持原来的页面会话。

    这一点很好理解,只要浏览器 tab 页没有关闭,我们的 sessionStorage 就一直存在,也就是刷新并不会清楚 sessionStorage。 

3. cookie、localstorage和sessionstorage的查看
  • 以谷歌浏览器为例:F12,进入应用选项

 


JWT使用笔记:

  • JWT是用于认证的字符串,具体原理见上述demo中的学习笔记,下面只讲述怎么使用
  • 提供一个JWT工具类
        <!--引入jwt-->
        <dependency>
            <groupId>com.auth0</groupId>
            <artifactId>java-jwt</artifactId>
            <version>3.4.0</version>
        </dependency>

import com.auth0.jwt.JWT;
import com.auth0.jwt.JWTCreator;
import com.auth0.jwt.algorithms.Algorithm;
import com.auth0.jwt.interfaces.DecodedJWT;

import java.util.Calendar;
import java.util.Map;

public class JWTUtils {


    private static final String  SING = "!Q@W3e4r%T^Y";

    /**
     * 生成token  header.payload.sing
     */
    public static String getToken(Map<String,String> map){

        Calendar instance = Calendar.getInstance();
        instance.add(Calendar.DATE,7);//默认7天过期

        //创建jwt builder
        JWTCreator.Builder builder = JWT.create();

        //payload
        map.forEach((k,v)->{
            builder.withClaim(k,v);
        });

        String token = builder.withExpiresAt(instance.getTime())//指定令牌过期时间
                .sign(Algorithm.HMAC256(SING));//sign
        return token;
    }

    /**
     * 验证token 合法性
     *
     */
    public static DecodedJWT verify(String token){
        return JWT.require(Algorithm.HMAC256(SING)).build().verify(token);
    }

//    /**
//     * 获取token信息方法
//     */
//    public static DecodedJWT getTokenInfo(String token){
//        DecodedJWT verify = JWT.require(Algorithm.HMAC256(SING)).build().verify(token);
//        return verify;
//    }
}

  •  认证的话,在拦截器中进行认证

 


Cookie、Token和 sessionStoragelocalStorage 都是浏览器中用于存储数据的机制,但它们在用途、生命周期和数据大小等方面有所不同: 1. **Cookie**: - **用途**: Cookie 主要用于跟踪用户身份和设置,比如网站登录状态或用户的首选项。它们通常发送到服务器,服务器会回传一个带有特定域限制的标识。 - **生命周期**: 客户端控制,有默认过期时间(一般为1-2周)或由开发者设定的max-age属性。每次页面刷新都会发送给服务器。 - **大小限制**: 早期的限制通常较小,现在最大可达4KB,具体取决于浏览器配置。 - **安全性**: 容易被劫持,因为可以通过浏览器的cookies.txt文件查看。 2. **Token (通常指JWT)**: - **用途**: JWT(JSON Web Token)主要用于跨域身份验证,包含用户信息,服务器验证后返回给客户端,客户端在每个请求头中附带此令牌。 - **生命周期**: 可以设置为长或短,可包含自签发到过期的详细信息,也可以通过服务器进行刷新。 - **存储位置**: 常见的是在HTTP头部,不是浏览器存储,但有时前端也会存储为局部存储。 - **安全性**: 加密和签名确保了令牌的安全性,但同样可能因拦截而暴露。 3. **sessionStorage**: - **用途**: 仅在当前会话期间有效,存储的数据是私有的,不会发送到服务器,适用于临时保存用户交互信息。 - **生命周期**: 直到浏览器窗口关闭或刷新页面时失效。 - **数据大小**: 比localStorage大,一般限制在5MB左右,但不同浏览器可能有差异。 - **跨域限制**: 同源策略限制,不能跨域访问。 4. **localStorage**: - **用途**: 存储长期数据,如用户的设置或首选项,生命周期长,直到用户清除浏览器数据。 - **生命周期**: 没有明确的过期日期,除非手动删除或达到存储限制。 - **数据大小**: 较大,通常超过5MB,但同样受浏览器配置影响。 - **跨域限制**: 同样受限于同源策略,且同源情况下才能读取。 相关问题: 1. 如何根据数据的敏感性和使用场景选择合适的存储方式? 2. 当用户关闭浏览器后,sessionStoragelocalStorage的数据处理方式有何不同? 3. 使用Cookie时,如何设置一个自定义过期时间?
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

PH = 7

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值