localStorage用于长期存储字符串数据,关闭浏览器不丢失,sessionStorage仅限当前标签页,关闭即清除;二者均需手动序列化/解析对象,容量约5–10MB,不随请求发送。

JavaScript 用 localStorage 和 sessionStorage 存储字符串数据,它们都属于 Web Storage API,比 Cookie 更简单、容量更大(通常 5–10MB),且不会随请求自动发送到服务器。
localStorage:长期保存,关浏览器也不丢
数据会一直保留在浏览器里,除非手动清除(比如调用 removeItem() 或用户清缓存)。
-
存数据:必须是字符串,非字符串会自动转成字符串(比如对象会变
[object Object])localStorage.setItem('username', 'Alice');localStorage.setItem('count', 42); // 自动变成 "42" -
取数据:
getItem()返回字符串,记得手动解析(如 JSON)const name = localStorage.getItem('username'); // "Alice"const count = Number(localStorage.getItem('count')); // 42const user = JSON.parse(localStorage.getItem('user')); // 如果存的是 JSON 字符串 -
删数据:
removeItem('key')删除单个,clear()清空全部localStorage.removeItem('tempData');
sessionStorage:只在当前标签页有效,关掉就没了
生命周期绑定当前浏览器标签页(或窗口)。刷新保留,但关闭标签页后数据自动清除。适合临时状态,比如表单草稿、页面滚动位置。
- 用法和
localStorage完全一样,只是把localStorage换成sessionStoragesessionStorage.setItem('draft', '今天要完成…');const draft = sessionStorage.getItem('draft'); - 新开一个标签页访问同一网址,
sessionStorage是完全独立的,互不干扰。
注意事项和常见坑
这两个存储只能存字符串,直接存对象、数组、日期等会丢失类型和结构。
本书全面介绍PHP脚本语言和MySOL数据库这两种目前最流行的开源软件,主要包括PHP和MySQL基本概念、PHP扩展与应用库、日期和时间功能、PHP数据对象扩展、PHP的mysqli扩展、MySQL 5的存储例程、解发器和视图等。本书帮助读者学习PHP编程语言和MySQL数据库服务器的最佳实践,了解如何创建数据库驱动的动态Web应用程序。
立即学习“Java免费学习笔记(深入)”;
-
存对象?先 JSON 序列化
localStorage.setItem('user', JSON.stringify({name: 'Bob', age: 30})); -
取的时候别忘了反序列化
const user = JSON.parse(localStorage.getItem('user')) || {};(加||{}防止null报错) - 超出容量会报错(QuotaExceededError),建议存之前 try-catch
-
隐私模式下可能不可用,部分浏览器限制写入,使用前可简单检测:
try { localStorage.setItem('test', 'ok'); localStorage.removeItem('test'); } catch(e) { /* 不支持 */ }
localStorage 和 sessionStorage 的区别一句话总结
localStorage 是“记住你”,sessionStorage 是“只记这一会儿”。 选哪个,关键看数据需要活多久、是否跨标签页共享。
基本上就这些。不复杂,但容易忽略类型转换和异常处理。










