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

原创已于 2023-05-14 16:11:53 修改 · 341 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

于 2022-12-23 11:10:10 首次发布

前端分项专栏收录该内容

1 篇文章

订阅专栏

本文探讨了用户信息存储从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()	清除当前域下的所有键值对。

区别：

localStorage 本地
- 保存在电脑中，浏览器关闭，数据依旧在（小电影的浏览记录也都在）
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>