webStroage > cookie > session > jwt 用户信息发展全过程

本文探讨了用户信息存储从cookies到session再到JWT的发展,强调了Web Storage中的localStorage和sessionStorage的区别。cookies受限于4KB大小且每次请求都会携带;sessionStorage数据在浏览器窗口关闭后消失,而localStorage数据持久存在。session的安全问题导致了JWT的出现,JWT通过分段字符保证安全性,服务器仅负责解密验证。

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

1. cookies:大小限制4k,携带在http请求上,一般放一些用户信息,不存储数据
2. sessionStorage:会话存储,浏览器窗口关闭自动销毁
3. localStorage:本地存储,不主动销毁,一直存在
4. session:直接存token不安全,session把key放在cookies,value存在服务器,导致了服务器需要帮助大量用户存放数据,而且用户访问不同的服务器有地区限制
5. jwt:解决session,是由两个.分割出的三段字符段,修改一个字符,数据就报错,服务器只用使用解密方式解密就可以了

Web Storage浏览器存储,localStorage本地存储、sessionStorage会话存储

localStorage本地存储、sessionStorage会话存储:API都一样

方法和属性描述
setItem(key, value)该方法接收一个键名和值作为参数,将会把键值对添加到存储中,如果键名已存在,则更新其对应的值。
getItem(key)该方法接收一个键名作为参数,返回键名对应的值。
removeItem(key)该方法接收一个键名作为参数,并把该键名和值从存储中删除。
length类似数组的 length 属性,用于访问 Storage 对象中 item 的数量。
key(n)用于访问第 n 个 key 的名称。
clear()清除当前域下的所有键值对。

区别:

  1. localStorage 本地

    • 保存在电脑中,浏览器关闭,数据依旧在(小电影的浏览记录也都在)

  2. sessionStorage 会话

    • 保存在浏览器窗口中,浏览器关闭,数据消失

在使用 Web Storage 前,应检查浏览器是否支持 localStorage 和 sessionStorage:

//判断Storage类型如果不为undefined,代表可以识别类型,浏览器支持
if (typeof(Storage) !== 'undefined') {
    console.log('支持 localStorage、sessionStorage 对象');
    // 一些代码......放下边的function函数和方法
} else {
    console.log('抱歉,不支持 web 存储');
}

案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>存储和移除字符串</title>
    </head>
    <body>
        <button onclick="save()">存储</button>
        <button onclick="read()">读取</button>
        <button onclick="remove()">移除</button>
        <p>存储的值:<span id="result"></span></p>
        <script>
            function save() {
                // 存储字符串
                localStorage.sitename = '百度一下';
            }
​
            function read() {
                // 读取字符串
                document.getElementById('result').innerText = localStorage.sitename;
            }
​
            function remove() {
                // 移除字符串
                localStorage.removeItem('sitename');
            }
        </script>
    </body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值