讲师中心 微信公众号
AI工具推荐 视频效率加速

javascript如何存储数据_localStorage和sessionStorage有何不同

轻瑶大大_1557

轻瑶大大_1557

发布时间:2026-01-01 22:49:28

|

186人浏览过

|

来源于php中文网

原创

localStorage长期保存且同域标签页共享,sessionStorage仅限当前标签页、关闭即销毁;二者均只存字符串、容量约5–10MB、不参与HTTP请求。

javascript如何存储数据_localstorage和sessionstorage有何不同

localStorage 和 sessionStorage 都是浏览器提供的客户端数据存储机制,用于在用户本地保存键值对(字符串),但它们的生命周期和作用域完全不同。

localStorage:长期保存,跨会话有效

数据一旦写入,就一直保留在浏览器中,除非被代码主动删除或用户手动清除缓存。关闭标签页、重启浏览器甚至重启电脑都不会丢失。

dmap-jsapi-skill
dmap-jsapi-skill

DMap GL地图JSAPI(dmapgl)开发指南。用于编写、审查、调试 DMap 地图 API 代码,涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载
  • 适用场景:用户偏好设置(如主题、语言)、登录态标记(配合后端 token 使用)、离线缓存数据
  • 写法示例:localStorage.setItem('theme', 'dark')
  • 读取示例:localStorage.getItem('theme')
  • 注意:只能存字符串;对象需先 JSON.stringify(),读取后要 JSON.parse()

sessionStorage:仅限当前标签页,关闭即销毁

数据只在当前浏览器标签页(或窗口)中有效,页面刷新保留,但关闭该标签页后数据自动清空。不同标签页之间互不共享。

  • 适用场景:表单草稿临时保存、多步骤流程中的中间状态、一次性验证码或跳转参数
  • 写法示例:sessionStorage.setItem('step', '2')
  • 读取示例:sessionStorage.getItem('step')
  • 注意:同样只支持字符串,对象需序列化/反序列化

关键区别一目了然

  • 有效期:localStorage 永久(直到清除);sessionStorage 仅当前会话(标签页)
  • 共享范围:两者都按协议+域名+端口隔离;localStorage 同域名所有标签页共享;sessionStorage 仅本标签页可用
  • 容量限制:通常都是 5–10MB 左右(因浏览器而异),远大于 Cookie 的 4KB
  • 是否随请求发送:都不参与 HTTP 请求,完全由 JS 控制,比 Cookie 更轻量、更隐私

用错的常见坑

  • 把敏感信息(如密码、完整 token)直接存在 localStorage —— XSS 攻击可直接读取,不安全
  • 期望 sessionStorage 在新标签页打开时还能访问(比如 window.open() 或链接 target="_blank")—— 实际上是全新会话,数据为空
  • 存对象不处理 JSON 转换,导致 getItem() 返回 "[object Object]" 这种无意义字符串
基本上就这些。选哪个,核心就看“数据要不要跨页面/跨重启保留”。

热门AI工具

更多
AionClaw
AionClaw Hot

AionClaw是一款面向办公、创作和编程任务的AI桌面智能体。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

DeepSeek

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

豆包大模型

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

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

Laper
Laper Hot

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

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

PixTV
PixTV Hot

PixTV是一款面向AIGC内容创作的AI视频生成工具。

WorkBuddy

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

相关专题

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

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

2115

2023.08.07

json是什么
json是什么

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

3222

2023.08.23

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

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

1096

2023.10.13

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

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

3679

2025.09.10

cookie
cookie

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

11839

2023.06.30

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

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

1126

2023.11.23

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

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

804

2024.02.23

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

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

1906

2025.08.19

OpenJDK JVM参数怎么调优
OpenJDK JVM参数怎么调优

Java应用运行缓慢,如何调整JVM参数?本专题介绍OpenJDK JVM性能调优的基本流程,涵盖性能指标确认、运行数据采集、内存配置和垃圾回收分析,帮助你先定位瓶颈,再通过对照测试验证效果,避免直接套用参数而影响应用稳定性。

20

2026.10.16

热门下载

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

精品课程

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

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.2万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.7万人学习

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

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