localStorage是浏览器提供的一种web数据存储的机制,它的作用是用于在客户端(用户的浏览器)持久化存储键值对数据。它的主要作用包括:
1. 持久化存储数据
- 数据会一直保留在浏览器中,即使关闭页面或重启浏览器也不会丢失(除非手动清除)。
- 与 sessionStorage(会话结束时数据清除)不同,localStorage 的数据是长期有效的。
2. 存储容量较大
- 通常每个域名下可存储 5MB~10MB 的数据(不同浏览器可能略有差异),比 Cookie(约 4KB)大得多。
3. 仅限客户端使用
- 数据仅存储在用户的浏览器中,不会自动发送到服务器(与 Cookie 不同)。
- 适合保存不敏感的用户偏好、缓存等数据。
4. 同源策略限制
- 数据按域名(协议+域名+端口)隔离,不同网站无法互相访问对方的 localStorage。
localStorage在一般应用中可以保存用户偏好(设置网页颜色,语言设置等),缓存静态资源(如存储不经常变化的 API 响应,减少网络请求)离线应用(配合 Service Worker 实现离线功能),表单草稿(临时保存用户输入,防止意外丢失)。
下面展示js操作用户浏览器保存数据的实例
// 存储数据
localStorage.setItem('key', 'value');
// 读取数据
const data = localStorage.getItem('key'); // 返回 "value"
// 删除指定数据
localStorage.removeItem('key');
// 清空所有数据
localStorage.clear();
// 存储对象(需转为 JSON 字符串)
const user = { name: 'Alice' };
localStorage.setItem('user', JSON.stringify(user));
const savedUser = JSON.parse(localStorage.getItem('user'));
通过上面代码我们将key的值value存放到了用户浏览器,localStorage.setItem('key', 'value');并介绍了如何读取数据和删除存放的数据,通过代码的实例可以清楚的学习到localStorage的使用方法。