当前位置: 首页 > news >正文

前端数据存储localStorage、sessionStorage 与 Cookie

localStorage、sessionStorage 与 Cookie这三种技术都允许在浏览器端存储数据,但它们在设计目的、生命周期、作用域和与服务器的交互方式上有显著区别。

一、详细介绍

1. Cookie

Cookie 是为服务器端脚本设计的,主要用于在客户端存储少量会话或状态信息。

  • 生命周期

    • 通过 Expires 或 Max-Age 属性设置过期时间。

    • 如果没有设置,则为“会话Cookie”,在浏览器关闭时失效。

  • 与服务器的交互

    • 浏览器会自动在每次 HTTP 请求的 Cookie 请求头中携带所有符合条件的 Cookie。

    • 服务器通过 Set-Cookie 响应头来设置或更新客户端的 Cookie。

  • 安全相关属性

    • HttpOnly: 防止 JavaScript 通过 document.cookie 访问,有效防范 XSS 攻击。

    • Secure: 只允许通过 HTTPS 协议传输。

    • SameSite: 控制 Cookie 在跨站请求时是否被发送,用于防范 CSRF 攻击。

      • Strict: 完全禁止跨站携带。

      • Lax: 宽松策略,部分导航(如链接跳转)会携带。

      • None: 允许跨站携带(必须与 Secure 属性一同设置)。

示例代码:

// 设置 Cookie (原生 API)
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/";// 读取 Cookie (原生 API)
console.log(document.cookie); // 输出: "username=John Doe; someOtherCookie=value"// 删除 Cookie (通过设置过期时间为过去)
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
2. localStorage

localStorage 是 Web Storage API 的一部分,用于在浏览器中存储持久化数据,数据不会过期,除非手动清除。

  • 生命周期: 数据永久存储,即使关闭浏览器或重启电脑也不会丢失。只能通过 JavaScript、清除浏览器数据或浏览器扩展来删除。

  • 作用域: 在同一协议+域名+端口(即同源)的所有页面和标签页中共享。

  • 存储事件: 当其他标签页修改了 localStorage 时,当前标签页可以监听到 storage 事件,从而实现多标签页通信。

示例代码:

// 存储数据
localStorage.setItem('theme', 'dark');
localStorage.setItem('userSettings', JSON.stringify({ fontSize: 14, notifications: true }));// 读取数据
const theme = localStorage.getItem('theme'); // 'dark'
const settings = JSON.parse(localStorage.getItem('userSettings')); // { fontSize: 14, notifications: true }// 删除特定数据
localStorage.removeItem('theme');// 清空所有 localStorage 数据
localStorage.clear();
3. sessionStorage

sessionStorage 与 localStorage 同属 Web Storage API,但其数据生命周期与浏览器会话绑定。

  • 生命周期: 数据仅在当前浏览器标签页或窗口的生命周期内有效。刷新页面数据依然存在,但关闭标签页/浏览器后,数据会被清除

  • 作用域: 作用域比 localStorage 更严格。它不仅受同源策略限制,还被限定在当前标签页。即使是同源的另一个标签页,也无法访问当前标签页的 sessionStorage。

    • 例外: 通过 window.open 或从当前页面点击链接打开的同源新标签页,有时会复制源标签页的 sessionStorage(行为因浏览器而异)。

示例代码:

// 存储数据
sessionStorage.setItem('formData', JSON.stringify({ name: 'Alice', email: 'alice@example.com' }));// 读取数据
const data = JSON.parse(sessionStorage.getItem('formData'));// 删除数据
sessionStorage.removeItem('formData');// 清空所有 sessionStorage 数据
sessionStorage.clear();

二、如何选择?

根据你的具体需求来选择合适的技术:

场景推荐技术理由
用户登录状态Cookie (设置 HttpOnly 和 Secure)安全性高,每次请求自动携带,便于服务器验证。
长期用户偏好(如主题、语言)localStorage容量大,不参与网络请求,可永久存储。
购物车内容localStorage容量大,即使关闭浏览器也能恢复,提升用户体验。
填写长表单时的临时保存sessionStorage临时存储,防止页面刷新导致数据丢失,关闭标签后自动清理。
不敏感的单次会话信息sessionStorage简单方便,会话结束即销毁。
多标签页应用状态同步localStorage (+ storage 事件)利用其共享性和事件机制,可以实现标签页间的通信。

三、安全注意事项

  1. 不要存储敏感信息: 绝对不要在 localStoragesessionStorage 或未加密的 Cookie 中存储密码、令牌、个人身份证号等敏感信息。它们很容易通过 XSS 攻击被读取。

  2. 防范 XSS: 由于 Web Storage 可以通过 JavaScript 直接访问,它们极易受到 XSS 攻击。确保对用户输入进行充分的转义和过滤。

  3. 正确设置 Cookie 属性: 对于认证相关的 Cookie,务必使用 HttpOnlySecure 和 SameSite 属性来增强安全性。

http://www.dtcms.com/a/503558.html

相关文章:

  • 电影网站制作有哪些做微信小游戏的网站
  • Git从入门到精通教程
  • 课程视频网站建设的必要性色母图片
  • GEO内容更新与迭代策略:趋势话题的快速响应机制
  • 【Spring】Spring事务和事务传播机制
  • php网站开发源码网站开发部门结构
  • 03-流程控制语句-导读
  • MATLAB基于混合算法改进灰色模型的装备故障预测
  • Next.JS环境搭建,对接Rust的RESTful API
  • 目前流行的网站分辨率做多大自己做网站需要备份么
  • NativeScript-Vue 开发指南:直接使用 Vue构建原生移动应用
  • 珠海市横琴建设局网站html网站自带字体怎么做
  • 看汽车图片的网站可以做壁纸差异基因做聚类分析网站
  • 了解制造过程中的BOM类型
  • 小九源码-springboot088-宾馆客房管理系统
  • 数字芯片的版图和制造--被称为3极管的晶体管却有4极!
  • 专门做优惠劵的网站专业的销售网站
  • 从0到1学习Qt -- 内存管理与乱码问题
  • html`<mark>`
  • C++ stack 和 queue
  • 洛谷 P1035:[NOIP 2002 普及组] 级数求和 ← double
  • C程序中的大规模程序设计:从模块化到抽象数据类型
  • 响应式网站高度如何计算seo自动点击排名
  • 企业网站引导页模板江西门户网站建设
  • Prim 算法和 Kruskal 算法应用场景
  • 雷电模拟器环境配置
  • 南沙移动网站建设中元建设集团网站
  • 公司网站百度推广wordpress没中文插件
  • 手写Spring第7弹:Spring IoC容器深度解析:XML配置的完整指南
  • java的异常体系