浏览器存储 Cookie,Local Storage和Session Storage

什么是Cookie?

  • 存储容量:一般限制在 4KB 以内。

  • 数据有效期:可以设置过期时间,若未设置,则在浏览器关闭时失效。

  • 数据共享 :在同一域名下,不同页面可以共享cookie数据。并且在每次 HTTP 请求时,cookie会被发送到服务器端。

  • 数据存储和读取 :需要手动解析和设置document.cookie字符串。

  • 在HTTP明文传输中不够安全,容易被修改。

  • 每次请求都会携带Cookie数据增加流量浪费性能。

  • 示例代码:

    // 存储数据
    document.cookie = 'name=daxiaojiuhenpi; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/';
    // 读取数据
    function getCookie(name) {
    const value = ; ${document.cookie};
    const parts = value.split(; ${name}=);
    if (parts.length === 2) return parts.pop().split(';').shift();
    }
    const name = getCookie('name');
    console.log(name);

什么是Local Storage?

  • 存储容量:一般为 5MB 左右,不同浏览器可能存在差异。

  • 数据有效期:除非手动删除,否则数据不会过期,会一直存储在浏览器中。

  • 数据共享 :在同一域名下,不同页面可以共享localStorage数据。

  • 数据存储和读取 :使用setItem方法存储数据,getItem方法读取数据。

  • 不支持在不同浏览器共享数据。

  • 一网站只能访问自己域下的LS。

  • 示例代码:

    // 存储数据
    localStorage.setItem('username', '打小就很皮');
    // 读取数据
    const username = localStorage.getItem('username');
    console.log(username);

什么是Session Storage?

  • 存储容量 :与localStorage类似,通常为 5MB 左右。

  • 数据有效期:数据仅在当前会话期间有效,当页面关闭后,数据会被清除。

  • 数据共享:仅在同一窗口(或标签页)的不同页面间共享数据,不同窗口(或标签页)的数据是相互独立的。

  • 数据存储和读取 :使用setItem方法存储数据,getItem方法读取数据。

  • 示例代码

    // 存储数据
    sessionStorage.setItem('token', 'DGBjbjbg35bhjbuydsatdgry3bd8t');
    // 读取数据
    const token = sessionStorage.getItem('token');
    console.log(token);

差异总结:不同点

Cookie Local Storage Session Storage
存储内容是否发送到服务端 每请求都发回 只保存在本地
数据存储大小 不超过4KB 达到5MB
数据存储有效期 自行设置失效时间 永久有效 关闭浏览器前有效
作用域 同源同窗口都是共享 不同窗口不共享
相关推荐
翻滚吧键盘几秒前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
苦夏木禾5 分钟前
js请求避免缓存的三种方式
开发语言·javascript·缓存
重庆小透明10 分钟前
力扣刷题记录【1】146.LRU缓存
java·后端·学习·算法·leetcode·缓存
秃了也弱了。19 分钟前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome
乆夨(jiuze)40 分钟前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
忧郁的蛋~1 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel
小彭努力中1 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
然我1 小时前
别再只用 base64!HTML5 的 Blob 才是二进制处理的王者,面试常考
前端·面试·html
NanLing1 小时前
【纯前端推理】纯端侧 AI 对象检测:用浏览器就能跑的深度学习模型
前端
kingsley1 小时前
safari 浏览器的一次问题定位
浏览器