讲师中心 微信公众号

工具推荐

视频效率加速
剧云
剧云

中文短剧剧本制作平台

立刻MV
立刻MV

低成本歌曲 MV、视频生成

AniShort
AniShort

AI短剧协同制作平台

Seko
Seko

AI短剧一键生成成片

javascript如何存储数据_localStorage和sessionStorage有什么区别?

千晨同学_1787

千晨同学_1787

发布时间:2026-01-08 16:56:03

|

911人浏览过

|

来源于php中文网

原创

localStorage持久存储、跨标签页共享,适合长期非敏感数据;sessionStorage仅限当前标签页、关闭即销毁,适合临时状态。二者均只支持字符串、需手动序列化,不可存敏感信息,且无过期机制。

javascript如何存储数据_localstorage和sessionstorage有什么区别?

localStorage 和 sessionStorage 都能存字符串,但生命周期、作用域和用途完全不同——选错一个,轻则数据丢失,重则用户登录态错乱。

localStorage 会一直留着,除非你手动删或用户清缓存

它把数据写在浏览器本地磁盘上,关页面、关浏览器、重启电脑都不影响。适合存用户偏好、主题设置、离线缓存的列表页数据这类「长期有用但不敏感」的信息。

  • 同一域名下所有标签页共享同一个 localStorage,改一个,其他页 storage 事件能监听到
  • 容量通常为 5–10 MB(各浏览器略有差异),远大于 cookie
  • 只支持字符串,存对象得先 JSON.stringify(),取出来得 JSON.parse()
  • 不能跨子域访问: app.example.com 和 api.example.com 是两个独立的 localStorage
localStorage.setItem('theme', 'dark');
localStorage.setItem('userSettings', JSON.stringify({ fontSize: 16, lang: 'zh' }));

// 取值
const theme = localStorage.getItem('theme'); // 'dark'
const settings = JSON.parse(localStorage.getItem('userSettings')); // { fontSize: 16, lang: 'zh' }

sessionStorage 只在当前标签页活着,关了就清空

它的生命周期绑定在「浏览器标签页会话」上:新开一个标签页是全新一份;页面刷新保留;关闭该标签页后数据立刻销毁。适合临时中转数据,比如多步表单的中间状态、搜索关键词的暂存。

HISUI 前端框架开发指南(IRIS版)
HISUI 前端框架开发指南(IRIS版)

HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库,专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考,支持声明式与编程式两种初始化方式,提供 $cm/$m 数据访问方法。

下载
  • 即使同域名,不同标签页之间的 sessionStorage 完全隔离,互不可见
  • 不触发跨标签页的 storage 事件(因为根本没“跨”)
  • 同样只存字符串,同样要手动序列化/反序列化
  • 容量和 localStorage 基本一致,但部分旧版 Safari 对 sessionStorage 限制更严
sessionStorage.setItem('formStep', '2');
sessionStorage.setItem('searchQuery', 'javascript storage');

// 关闭这个标签页后,这两项就彻底消失了

别用它们存敏感信息,也别指望它们替代后端数据库

两者都运行在前端,任何用户都能打开 DevTools 直接读写 localStorage 或 sessionStorage,所以绝对不能放 token、密码、身份证号这类东西。另外,它们没有过期时间、没有自动同步机制、不支持索引查询,复杂逻辑一上来就容易卡住。

立即学习“Java免费学习笔记(深入)”;

  • JWT token 如果只是临时使用(如登录后跳转),用 sessionStorage 更安全;需要“记住我”,才考虑加密后走 localStorage + 后端校验
  • 大量数据(比如上万条日志)写入会导致主线程阻塞,localStorage 是同步 API,卡顿明显
  • 隐私模式下,Safari 和 Firefox 的 localStorage 是会话级的(关窗口即清),行为和 sessionStorage 一样,这点容易被忽略
  • 如果要用键值对持久化,又需要加密或过期控制,建议封装一层工具类,而不是裸用原生 API

真正难的不是“怎么存”,而是想清楚“谁需要读、什么时候失效、出错了怎么降级”。比如用户切到另一个标签页继续操作,sessionStorage 就断了,这时候要不要 fallback 到 localStorage?要不要和服务端对一次时钟?这些细节比语法本身重要得多。

热门AI工具

更多
小橡皮AI

一款AI工具,主要用于小橡皮一键去AI味,将机器味重的内容改得更有活人感,防止因为 AI 内容被平台打上 AI 标签,以及限流,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

函子Zion

一款支持AI搭建、可视化编辑和多端发布的全栈无代码开发平台。

Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

码上飞
码上飞 Hot

一款基于自然语言的AI应用开发平台,可根据用户描述自动生成应用程序,帮助个人和团队快速完成应用原型与开发。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2315

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

3802

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

1256

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

4419

2025.09.10

cookie
cookie

Cookie 是一种在用户计算机上存储小型文本文件的技术,用于在用户与网站进行交互时收集和存储有关用户的信息。当用户访问一个网站时,网站会将一个包含特定信息的 Cookie 文件发送到用户的浏览器,浏览器会将该 Cookie 存储在用户的计算机上。之后,当用户再次访问该网站时,浏览器会向服务器发送 Cookie,服务器可以根据 Cookie 中的信息来识别用户、跟踪用户行为等。

12859

2023.06.30

document.cookie获取不到怎么解决
document.cookie获取不到怎么解决

document.cookie获取不到的解决办法:1、浏览器的隐私设置;2、Same-origin policy;3、HTTPOnly Cookie;4、JavaScript代码错误;5、Cookie不存在或过期等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

1326

2023.11.23

阻止所有cookie什么意思
阻止所有cookie什么意思

阻止所有cookie意味着在浏览器中禁止接受和存储网站发送的cookie。阻止所有cookie可能会影响许多网站的使用体验,因为许多网站使用cookie来提供个性化服务、存储用户信息或跟踪用户行为。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

884

2024.02.23

cookie与session的区别
cookie与session的区别

本专题整合了cookie与session的区别和使用方法等相关内容,阅读专题下面的文章了解更详细的内容。

1986

2025.08.19

Go-Zero API开发使用教程
Go-Zero API开发使用教程

本专题聚焦Go-Zero的API开发,拆解.api描述文件的语法结构、路由与分组定义、参数绑定与校验规则,说明统一响应体、JWT鉴权、跨域与接口文档生成的落地方式,并给出网关聚合与接口测试的实践建议。

0

2026.11.12

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.5万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn