讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
首页 > web前端 > js教程 > 正文

javascript如何实现本地存储_localStorage和sessionStorage有什么区别？

幻影之瞳
发布： 2025-12-19 22:31:02
原创
943人浏览过
localStorage持久存储，关闭浏览器仍保留；sessionStorage仅当前标签页有效，关闭即清除；二者同源共享、容量5–10MB、仅支持字符串、需JSON处理对象、受同源策略限制且不宜存敏感信息。

javascript如何实现本地存储_localstorage和sessionstorage有什么区别？

localStorage 和 sessionStorage 都是浏览器提供的客户端存储机制，用于在用户本地保存键值对数据，但它们的生命周期、作用域和使用场景有明显区别。

localStorage：持久化存储，关浏览器也不丢

数据会一直保留在浏览器中，除非手动清除（比如调用 localStorage.removeItem() 或清空浏览器缓存），即使关闭标签页、重启浏览器甚至电脑，数据依然存在。

AI发型设计
AI发型设计

虚拟发型试穿工具和发型模拟器

AI发型设计 247
查看详情 AI发型设计
  • 适用场景：记住用户偏好（如主题色、语言）、长期登录状态标识、离线缓存内容
  • 操作示例：

    localStorage.setItem('username', 'Alice');

    const name = localStorage.getItem('username');

    localStorage.removeItem('username');

    localStorage.clear();

sessionStorage：仅限当前会话，关标签即失效

数据只在当前浏览器标签页（或窗口）的会话周期内有效。刷新页面保留，但关闭该标签页后数据自动清除；新开标签页即使访问同一网址，也无法读取之前 sessionStorage 的内容。

  • 适用场景：表单临时草稿、多步流程中的中间状态、防重复提交的令牌
  • 操作方式和 localStorage 完全一致：
    sessionStorage.setItem('step', '2');
    sessionStorage.getItem('step');

关键区别总结

  • 生命周期：localStorage 永久（直到手动清除），sessionStorage 仅当前标签页会话
  • 共享范围：同源下所有标签页可共享 localStorage；sessionStorage 严格隔离，每个标签页独立
  • 存储容量：两者通常都支持约 5–10MB（具体取决于浏览器），远大于 Cookie 的 4KB
  • 数据类型：只支持字符串。存对象需先 JSON.stringify()，读取时用 JSON.parse()

注意事项

  • 两者都受同源策略限制：协议、域名、端口必须完全一致才能访问
  • 敏感信息（如 token、密码）不应直接存入，建议配合 HttpOnly Cookie + 后端校验
  • 没有过期时间设置，需自行管理有效期（例如存入时间戳并读取时判断）
  • 在无痕模式下部分浏览器会禁用或清空这些存储（尤其 sessionStorage）

以上就是javascript如何实现本地存储_localStorage和sessionStorage有什么区别？的详细内容，更多请关注php中文网其它相关文章！

相关标签：
javascript java js json cookie 浏览器 电脑 端口 session 后端 区别 JavaScript json 数据类型 Cookie Token const 字符串 对象 作用域

大家都在看：

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：javascript的构建工具是什么_webpack和vite有何不同 下一篇：javascript如何实现函数柯里化_有哪些用途
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
什么是模板字符串_Javascript中如何使用 模板字符串是JavaScript中用反引号包裹、支持多行文本和${}嵌入表达式的字符串写法，比单/双引号更灵活；支持直接换行、变量插值、运算及函数调用；还可通过标签函数实现高级定制处理。
2025-12-19 22:11:58
288
javascript中的国际化API是什么_如何实现多语言支持 JavaScript国际化依赖Intl对象进行数字、日期、货币等格式化，不处理文本翻译；需结合ICU消息格式资源包、语言检测与动态切换逻辑实现完整本地化。
2025-12-19 22:11:28
478
javascript模块打包是什么_为什么需要Webpack这样的工具？ JavaScript模块打包是将多个JS及非JS资源按依赖合并转换优化为少量浏览器可运行文件的过程；它解决ES6模块的局限性，支持Loader/Plugin扩展、代码分割、TreeShaking等工程化能力。
2025-12-19 22:09:56
474
javascript的Canvas是什么_如何绘制图形和动画？ Canvas是HTML绘图元素，需三步使用：获取画布、获取2D上下文、调用绘图方法；图形绘制分直接矩形与路径类，动画靠requestAnimationFrame循环清空重绘；注意尺寸设置、坐标原点、beginPath()调用及上下文状态管理。
2025-12-19 22:08:48
476
javascript模块打包是什么_Webpack和Vite有何不同？ Vite开发时免打包、按需编译，启动瞬时且HMR精准；Webpack全量构建、兼容性广但冷启动慢；新项目优先Vite，老项目或需深度定制选Webpack。
2025-12-19 22:08:02
352
JavaScript中的“this”关键字如何理解？ JavaScript中this的指向由调用时决定，而非定义时；普通调用指向全局或undefined，对象方法调用指向该对象，构造调用指向新实例，箭头函数继承外层this。
2025-12-19 22:08:02
661
为什么javascript需要严格模式_它能解决哪些潜在问题 严格模式是JavaScript的限制性执行环境，通过"usestrict"启用，能提前暴露隐性错误、防止意外创建全局变量、禁止静默失败操作、限制易错语法，并为ES6+特性提供兼容性基础。
2025-12-19 22:07:02
798
Javascript如何实现排序_如何自定义比较函数？ Array.prototype.sort()默认按字符串Unicode码点排序，数字数组需用(a,b)=>a-b升序或b-a降序；对象数组可按属性用减法或localeCompare排序，多级排序用逻辑或实现优先级。
2025-12-19 22:06:49
848
什么是javascript纯函数_它如何带来可预测性？ 纯函数是只依赖输入参数且无副作用的JavaScript函数，给定相同输入必返回相同输出，不修改外部状态；其核心特征为无副作用和输出仅由输入决定，适用于数据转换等需稳定性的场景。
2025-12-19 22:06:08
511
JavaScript中==和===的区别_类型转换规则 ===严格比较值和类型不转换，==会隐式转换类型后比较；如5==="5"为false，而"1"==true为true；推荐统一使用===，仅null==undefined等极少数场景例外。
2025-12-19 22:05:02
330
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部