讲师中心 微信公众号

工具推荐

视频效率加速
剧云
剧云

中文短剧剧本制作平台

立刻MV
立刻MV

低成本歌曲 MV、视频生成

Seko
Seko

AI短剧一键生成成片

updream

一键生成高质量推广成片

javascript会话存储是什么_它和本地存储有何区别?

秋宇酱_7919

秋宇酱_7919

发布时间:2026-01-08 20:10:02

|

901人浏览过

|

来源于php中文网

原创

sessionStorage是仅在当前标签页生命周期内有效的前端存储机制;关闭标签页即清空数据,同源多标签页间不共享,适用于临时状态如表单草稿,API与localStorage一致但作用域不同。

javascript会话存储是什么_它和本地存储有何区别?

会话存储(sessionStorage)是浏览器提供的、仅在当前标签页生命周期内有效的键值对存储机制;关闭该标签页(或窗口)后,所有数据自动清空。它和 localStorage 接口几乎完全一致,但数据寿命和作用域完全不同——这是唯一真正需要你记住的区别。

为什么关掉页面就丢了?——看懂 sessionStorage 的作用域规则

它不是“按时间”失效,而是“按会话”绑定:只要标签页没关闭,哪怕刷新、跳转、前进后退,数据都还在;一旦关闭该标签页(哪怕只是 Ctrl+W),整个 sessionStorage 就被浏览器彻底销毁。

  • 同源的多个标签页之间互不共享 sessionStorage,哪怕 URL 完全一样
  • 同一标签页内的 iframe(同源)可以共享父页的 sessionStorage
  • 新开的标签页(即使地址相同)拥有独立的 sessionStorage 实例
  • 不支持跨域,也不随 HTTP 请求发送,纯前端隔离

setItem / getItem 写法一样,但存错地方就白干

两者 API 完全一致,所以新手常误以为“换行改个名就能长期保存”,结果上线后发现用户填一半表单关了页面,再打开啥都没了——因为用了 sessionStorage 而非 localStorage。

精英前端设计-专业版
精英前端设计-专业版

企业级前端设计系统,支持多页面应用、React/Vue组件、品牌一致性与高级动效编排。

下载
sessionStorage.setItem('draft', JSON.stringify({ name: '张三', email: 'zhang@example.com' }));
// 刷新后仍可读
const draft = JSON.parse(sessionStorage.getItem('draft') || '{}');

// 但关掉这个标签页,上面这行就会返回 null
  • 必须手动 JSON.stringify() 存对象,getItem() 返回的是字符串,直接用会报错
  • 永远检查 getItem() 返回是否为 null,否则 JSON.parse(null) 抛 TypeError
  • 别指望它替代后端持久化——它连页面刷新都不保证(极端情况如崩溃恢复可能丢失)

选 sessionStorage 还是 localStorage?看这三个判断点

不是“哪个更新潮”,而是“谁更守规矩”:

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

  • 要跨页面保留(比如主题色、语言偏好、登录 token)→ 用 localStorage
  • 只在当前流程中暂存(比如多步表单中间状态、临时筛选条件、未提交的草稿)→ 用 sessionStorage
  • 涉及敏感操作(如二次验证环节的临时凭证),且不希望用户换标签页还能复用 → sessionStorage 更安全(比 localStorage 多一层天然隔离)

注意:两者容量通常都是 5–10MB,IE9+ 兼容,但 Safari 在无痕模式下可能直接禁用 sessionStorage(返回 QuotaExceededError),这点容易被忽略。

相关文章

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

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

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

Seko
Seko Hot

一款AI视频创作工具,主要用于商汤科技推出的创编一体的AI短视频创作Agent,适合需要提升相关任务效率的用户。

VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

DeepSeek

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

蛙蛙写作

一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。

WorkBuddy

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

PixPix
PixPix Hot

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

豆包大模型

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

Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

相关专题

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

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

2295

2023.08.07

json是什么
json是什么

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

3742

2023.08.23

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

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

1236

2023.10.13

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

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

4339

2025.09.10

c语言中null和NULL的区别
c语言中null和NULL的区别

c语言中null和NULL的区别是:null是C语言中的一个宏定义,通常用来表示一个空指针,可以用于初始化指针变量,或者在条件语句中判断指针是否为空;NULL是C语言中的一个预定义常量,通常用来表示一个空值,用于表示一个空的指针、空的指针数组或者空的结构体指针。

549

2023.09.22

java中null的用法
java中null的用法

在Java中,null表示一个引用类型的变量不指向任何对象。可以将null赋值给任何引用类型的变量,包括类、接口、数组、字符串等。想了解更多null的相关内容,可以阅读本专题下面的文章。

1698

2024.03.01

登录token无效
登录token无效

登录token无效解决方法:1、检查token的有效期限,如果token已经过期,需要重新获取一个新的token;2、检查token的签名,如果签名不正确,需要重新获取一个新的token;3、检查密钥的正确性,如果密钥不正确,需要重新获取一个新的token;4、使用HTTPS协议传输token,建议使用HTTPS协议进行传输 ;5、使用双因素认证,双因素认证可以提高账户的安全性。

15186

2023.09.14

登录token无效怎么办
登录token无效怎么办

登录token无效的解决办法有检查Token是否过期、检查Token是否正确、检查Token是否被篡改、检查Token是否与用户匹配、清除缓存或Cookie、检查网络连接和服务器状态、重新登录或请求新的Token、联系技术支持或开发人员等。本专题为大家提供token相关的文章、下载、课程内容,供大家免费下载体验。

1765

2023.09.14

Postman身份认证怎么配置
Postman身份认证怎么配置

本专题从实际API接口调试场景出发,讲解Postman身份认证的完整配置流程,包括常见认证协议介绍、授权参数设置、访问令牌填写、OAuth 2.0授权及认证失败排查,帮助用户正确完成接口授权与访问验证。

40

2026.11.06

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
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