HTML5WebStorage有什么区别_HTML5localStorage与sessionStorage的区别与用法-html教程-PHP中文网

HTML5WebStorage有什么区别_HTML5localStorage与sessionStorage的区别与用法

蓮花仙者

发布： 2025-11-22 23:15:05

原创

990人浏览过

localStorage持久存储，跨标签页共享；sessionStorage仅限当前标签页，会话结束即清除。两者均遵循同源策略，操作API相同，适用于不同场景：前者用于长期保存用户配置或token，后者适合临时表单数据或敏感信息。

html5webstorage有什么区别_html5localstorage与sessionstorage的区别与用法

HTML5 Web Storage 提供了在浏览器中本地存储数据的机制，相比传统的 Cookie，它拥有更大的存储空间和更简便的操作方式。其中最常用的两种存储方式是 localStorage 和 sessionStorage。虽然它们用法相似，但在生命周期、作用域等方面存在关键区别。

1. 数据生命周期的区别

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

sessionStorage 只在当前会话期间有效，一旦关闭浏览器标签页或窗口，数据就会被自动清除。

举例：使用 localStorage 存储用户的主题偏好，刷新或重新打开页面后仍能保持；而 sessionStorage 可用于保存表单临时输入内容，在用户离开页面后自动清理。

2. 作用域（访问范围）不同

两者都遵循同源策略，即只有在相同协议、域名和端口下才能访问同一份存储数据。

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

但具体作用域有差异：

汉仪书宋一字体

汉仪书宋一简是汉仪字库里面宋体的一种，与宋体字没什么区别，通常用于特殊提醒如批注中。

查看详情

localStorage 的作用域是**整个域名**，所有同源页面共享同一份数据。
sessionStorage 的作用域限定在**当前浏览器标签页**内，即使打开多个同源页面，每个标签页都有独立的 sessionStorage。

例如：在一个标签页中设置 sessionStorage，另一个标签页无法读取该数据；而 localStorage 设置后，所有同源页面都能访问。

3. 常见用法与API操作

两者的操作方法完全相同，支持以下常用方法：

setItem(key, value)：存储数据
getItem(key)：获取数据
removeItem(key)：删除指定数据
clear()：清空所有数据
key(index)：获取指定索引的键名

示例代码：

// 存储数据
localStorage.setItem('username', 'Alice');
sessionStorage.setItem('tempData', 'draft');

// 读取数据
let user = localStorage.getItem('username');
let draft = sessionStorage.getItem('tempData');

// 删除数据
localStorage.removeItem('username');

// 清空全部
sessionStorage.clear();

登录后复制