使用LocalStorage和SessionStorage进行本地存储_javascript数据存储-js教程-PHP中文网

使用LocalStorage和SessionStorage进行本地存储_javascript数据存储

betcha

发布： 2025-11-04 08:38:02

原创

364人浏览过

LocalStorage持久存储数据，关闭浏览器不丢失；SessionStorage仅在会话期间有效，关闭标签页即清除。两者均属Web Storage API，操作简单，用于存储字符串型数据，如用户偏好或表单临时状态。需注意：仅支持字符串存储，对象需用JSON.stringify转换；有5-10MB容量限制；遵循同源策略；不建议明文存敏感信息；可通过storage事件监听其他标签页的更改，但当前页修改不触发。合理选用可提升用户体验。

使用localstorage和sessionstorage进行本地存储_javascript数据存储

在Web开发中，LocalStorage 和 SessionStorage 是HTML5提供的两种客户端存储方案，允许我们在浏览器中保存数据。它们都属于Web Storage API，使用简单，适合存储字符串类型的数据，常用于保存用户偏好、登录状态或临时信息。

LocalStorage：持久化本地存储

LocalStorage 用于长期保存数据，除非用户手动清除浏览器缓存或通过代码删除，否则数据会一直存在，即使关闭浏览器或重启设备也不会丢失。

常用操作：

保存数据： localStorage.setItem('key', 'value');
读取数据： localStorage.getItem('key');
删除数据： localStorage.removeItem('key');
清空所有数据： localStorage.clear();

例如，保存用户主题偏好：

立即学习“Java免费学习笔记（深入）”；

localStorage.setItem('theme', 'dark');
const userTheme = localStorage.getItem('theme'); // 返回 'dark'

登录后复制

SessionStorage：会话级临时存储

SessionStorage 仅在当前会话期间有效。一旦关闭浏览器标签页或窗口，数据就会被清除。它适用于保存临时数据，比如表单填写过程中的中间状态。

它的API与LocalStorage完全一致：

Metafox企业内容管理系统0.9.1

Metafox 是一个企业内容管理系统，使用一个特别的模板系统，你可通过一些特定的设计和代码来轻松创建 Web 网站，内容存储在 SQL 关系数据库，通过 Web 进行管理，简单、快速而且高效。 Metafox 0.9.1 发布，该版本改用一种更棒的 URL 风格，实现了 RSS 源（可包含远端网站内容到 Metafox 段中），重定向老的访问密钥到新的密钥，增加 RotateAntispam 技

查看详情

保存数据： sessionStorage.setItem('tempData', 'draft');
获取数据： sessionStorage.getItem('tempData');
删除数据： sessionStorage.removeItem('tempData');
清空： sessionStorage.clear();

比如，在多步骤表单中保存用户输入：

sessionStorage.setItem('step1Data', JSON.stringify({ name: 'Alice' }));
const data = JSON.parse(sessionStorage.getItem('step1Data'));

登录后复制

注意事项与使用建议

虽然这两个API使用方便，但有一些关键点需要注意：

只能存储字符串。如果要存对象或数组，需用 JSON.stringify() 转换，读取时用 JSON.parse() 解析。
有存储大小限制，通常为5-10MB，具体取决于浏览器。
数据保存在同源策略下，不同域名无法访问彼此的Storage。
不支持跨标签页实时通信（但可通过storage事件监听变化）。
敏感信息（如密码、token）不建议明文存储，存在安全风险。

Storage事件监听（可选进阶）

当其他标签页修改了LocalStorage时，可以通过监听storage事件做出响应：

window.addEventListener('storage', (e) => {
  if (e.key === 'theme') {
    console.log('主题已更改为：', e.newValue);
  }
});

登录后复制

注意：当前页面对Storage的修改不会触发该事件，只响应其他同源页面的更改。

基本上就这些。LocalStorage和SessionStorage为前端提供了轻量、易用的数据存储方式，合理使用能显著提升用户体验。关键是根据数据生命周期选择合适的API，并注意数据类型和安全性问题。

以上就是使用LocalStorage和SessionStorage进行本地存储_javascript数据存储的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

JavaScript对象属性描述符是什么？ javascript如何操作蓝牙_Web Bluetooth API有哪些功能 javascript如何实现图形识别_机器学习库有哪些 javascript闭包如何工作_它为什么能访问外部作用域？什么是JavaScript Web Component_如何创建自定义HTML元素