JavaScript如何利用本地存储？-js教程-PHP中文网

JavaScript如何利用本地存储？

夢幻星辰

发布： 2025-12-23 14:06:08

原创

337人浏览过

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：仅限当前标签页生命周期

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

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

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

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

PHP Apache和MySQL 网页开发初步

本书全面介绍PHP脚本语言和MySOL数据库这两种目前最流行的开源软件，主要包括PHP和MySQL基本概念、PHP扩展与应用库、日期和时间功能、PHP数据对象扩展、PHP的mysqli扩展、MySQL 5的存储例程、解发器和视图等。本书帮助读者学习PHP编程语言和MySQL数据库服务器的最佳实践，了解如何创建数据库驱动的动态Web应用程序。

398

查看详情

立即学习“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>});

登录后复制

注意：触发事件的标签页自身不会收到该事件，仅其他同源页面响应
可用于“多窗口同步登录状态”或“一处修改，处处更新”的轻量场景

以上就是JavaScript如何利用本地存储？的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

什么是Javascript的WeakMap和WeakSet？什么是JavaScript中的解构赋值？什么是事件循环队列_javascript中微任务和宏任务如何区分？ javascript如何实现代码混淆_保护源码有哪些方法 JavaScript如何操作浏览器历史记录？