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

JavaScript如何利用本地存储?

阿辰吖_1968

阿辰吖_1968

发布时间:2025-12-23 14:06:08

|

357人浏览过

|

来源于php中文网

原创

JavaScript通过localStorage和sessionStorage实现本地存储:前者长期保存、跨会话有效,后者仅限当前标签页生命周期;均以字符串键值对存储,需JSON序列化对象,注意容量限制与安全风险。

javascript如何利用本地存储?

JavaScript 利用本地存储主要通过 localStorage 和 sessionStorage 两个 Web API,它们都以键值对(字符串)形式在浏览器中持久或临时保存数据,无需后端参与,适合缓存用户偏好、表单草稿、登录状态标识等场景。

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

数据保存后即使关闭浏览器、重启电脑也不会丢失,除非手动清除或代码删除。适用于记住主题模式、语言选择、最近搜索记录等。

  • 写入数据:localStorage.setItem('theme', 'dark')
  • 读取数据:const theme = localStorage.getItem('theme')(返回字符串,注意类型转换)
  • 删除单个:localStorage.removeItem('theme')
  • 清空全部:localStorage.clear()
  • 注意:只能存字符串;如需存对象,先用 JSON.stringify(),读取时用 JSON.parse()

sessionStorage:仅限当前标签页生命周期

数据只在当前浏览器标签页有效,关闭该标签页即自动清除。适合临时状态,比如多步骤表单的中间数据、页面内导航的过渡参数。

java-api-doc-generator
java-api-doc-generator

分析 Java Spring Boot 后端 Controller 代码,自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

下载
  • 用法与 localStorage 完全一致,只是把 localStorage 换成 sessionStorage
  • 同一域名下不同标签页之间的 sessionStorage 互不共享
  • 刷新页面不会丢失数据,但关闭再打开新标签页就没了

使用前检查支持性与容量限制

虽然现代浏览器普遍支持,但某些隐私模式或旧版本可能禁用。同时,存储空间有限(通常 5–10MB),且每个域名独立计算。

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

  • 简单检测:if (typeof localStorage !== 'undefined') { ... }
  • 写入时建议加 try-catch,防止超出配额报错:
    try { localStorage.setItem('key', 'value'); } catch (e) { console.warn('本地存储失败:', e); }
  • 避免存敏感信息(如密码、token),因为 localStorage 可被同源 JavaScript 任意读取

配合事件监听实现跨标签页通信(进阶)

当一个标签页修改 localStorage 时,其他同源标签页可通过 storage 事件得知变化,适合同步状态。

  • 监听示例:
    window.addEventListener('storage', (e) => {<br>  console.log('键', e.key, '从', e.oldValue, '变为', e.newValue);<br>});
  • 注意:触发事件的标签页自身不会收到该事件,仅其他同源页面响应
  • 可用于“多窗口同步登录状态”或“一处修改,处处更新”的轻量场景

热门AI工具

更多
火山引擎

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

Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

DeepSeek

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

WorkBuddy

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

UpDream
UpDream Hot

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

Laper
Laper Hot

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

豆包大模型

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

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

PixTV
PixTV Hot

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

相关专题

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

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

2215

2023.08.07

json是什么
json是什么

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

3502

2023.08.23

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

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

1176

2023.10.13

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

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

4039

2025.09.10

登录token无效
登录token无效

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

14466

2023.09.14

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

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

1705

2023.09.14

token怎么获取
token怎么获取

获取token值的方法:1、小程序调用“wx.login()”获取 临时登录凭证code,并回传到开发者服务器;2、开发者服务器以code换取,用户唯一标识openid和会话密钥“session_key”。想了解更详细的内容,可以阅读本专题下面的文章。

3997

2023.12.21

token什么意思
token什么意思

token是一种用于表示用户权限、记录交易信息、支付虚拟货币的数字货币。可以用来在特定的网络上进行交易,用来购买或出售特定的虚拟货币,也可以用来支付特定的服务费用。想了解更多token什么意思的相关内容可以访问本专题下面的文章。

6161

2024.03.01

Vite 项目如何打包和部署
Vite 项目如何打包和部署

Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。

60

2026.10.28

热门下载

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

精品课程

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

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.4万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.7万人学习

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

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