LocalStorage是Web Storage API的一部分,允许以键值对形式在浏览器中持久存储字符串数据。它提供setItem、getItem、removeItem和clear等方法进行数据操作,存储容量大且不随请求发送至服务器。由于仅支持字符串类型,存储对象或数组需通过JSON.stringify转换,读取时用JSON.parse解析。受同源策略限制,数据不会自动过期,需手动清理,且不宜存储敏感信息以防XSS攻击。掌握基本操作与注意事项可有效用于保存用户偏好等本地数据。

HTML5 的本地存储(LocalStorage)提供了一种简单的方式,让网页在用户浏览器中持久保存数据。与 Cookie 不同,LocalStorage 存储容量更大(通常为 5-10MB),不会随每次请求发送到服务器,适合存储不敏感的本地信息。下面介绍如何使用 LocalStorage 进行基本操作。
什么是 LocalStorage?
LocalStorage 是 Web Storage API 的一部分,允许你在浏览器中以键值对的形式存储字符串数据。只要不清除浏览器缓存,数据会一直保留,即使关闭页面或重启浏览器也不会丢失。
基本操作方法
LocalStorage 提供了几个常用的方法来存取和删除数据:
- setItem(key, value):存储数据
- getItem(key):读取数据
- removeItem(key):删除某条数据
- clear():清空所有数据
- key(index):通过索引获取键名
// 存储用户名称
立即学习“前端免费学习笔记(深入)”;
localStorage.setItem('username', 'Alice');
// 读取用户名称
let name = localStorage.getItem('username');
console.log(name); // 输出: Alice
// 删除用户名
localStorage.removeItem('username');
// 清空所有数据
本文档主要讲述的是Android 本地数据存储;对于需要跨应用程序执行期间或生命期而维护重要信息的应用程序来说,能够在移动设备上本地存储数据是一种非常关键的功能。作为一名开发人员,您经常需要存储诸如用户首选项或应用程序配置之类的信息。您还必须根据一些特征(比如访问可见性)决定是否需要涉及内部或外部存储器,或者是否需要处理更复杂的、结构化的数据类型。跟随本文学习 Android 数据存储 API,具体来讲就是首选项、SQLite 和内部及外部内存 API。希望本文档会给有需要的朋友带来帮助;感兴趣的朋友可以
localStorage.clear();
存储复杂数据类型
LocalStorage 只能存储字符串,如果要保存数组或对象,需要先转换成 JSON 字符串:
// 存储对象
let user = { name: 'Bob', age: 25 };
localStorage.setItem('user', JSON.stringify(user));
// 读取并解析对象
let userData = JSON.parse(localStorage.getItem('user'));
console.log(userData.name); // 输出: Bob
注意事项与限制
使用 LocalStorage 时需要注意以下几点:
- 只能存储字符串,非字符串类型需手动转换
- 数据不会过期,需手动清理
- 同源策略限制:只能在同一域名下访问存储的数据
- 不能跨域共享数据
- 不适合存储敏感信息(如密码、令牌),因为容易被 XSS 攻击窃取
基本上就这些。掌握 setItem、getItem 和 JSON 转换,就能在项目中灵活使用 LocalStorage 保存用户偏好、表单数据等本地信息。不复杂但容易忽略细节,比如忘记 JSON 转换会导致存入 "[object Object]" 这类问题。










