前端知识点---本地存储(javascript)
localStorage 是浏览器提供的一个 本地存储 API，可以在用户的浏览器中存储数据，数据不会随页面刷新而丢失。
1. 基本用法
(1) 存储数据（setItem）
localStorage.setItem("username", "zhangsan");
存储 “username”: “zhangsan” 到本地。
(2) 读取数据（getItem）
let user = localStorage.getItem("username");
console.log(user); // "zhangsan"
获取 localStorage 里 “username” 的值。
(3) 删除数据
删除单个数据（removeItem）
localStorage.removeItem("username");
清空所有数据（clear）
localStorage.clear();
- 存储对象
localStorage 只能存字符串，要存对象的话，需要用 JSON.stringify() 转换：
<!-- 存储对象可以实现多条数据 -->
<script>
const obj={
name:'张三',
age:18,
gender:'男'
}
localStorage.setItem('obj', obj)//前面的obj是键, 后面是值 不一样
console.log(localStorage.getItem('obj'));
// 因为只能存字符串 所以结果是[object Object]
// 解决:需要将复杂数据类型转换成ISON字符串,在存储到本地语法:JSON.stringify(复杂数据类型)
localStorage.setItem('obj', JSON.stringify(obj))
console.log(localStorage.getItem('obj'));//但是这是字符串形式
读取时需要 JSON.parse() 解析回来：
console.log(JSON.parse(localStorage.getItem('obj') ));
3. 实际案例：存储商品数据
let products = [
{ id: 1, title: "商品1", price: 100 },
{ id: 2, title: "商品2", price: 200 },
];
// 存储商品列表
localStorage.setItem("products", JSON.stringify(products));
// 读取商品列表
let savedProducts = JSON.parse(localStorage.getItem("products"));
console.log(savedProducts);
4. sessionStorage vs localStorage
| 特性 | localStorage | sessionStorage |
|---|---|---|
| 存储时间 | 永久存储，页面关闭后仍然存在 | 仅在 当前标签页 有效，关闭标签页数据就没了 |
| 存储大小 | 约 5MB | 约 5MB |
| 作用域 | 同源的所有页面都能访问 | 只在当前页面的 标签页 内有效 |
简单来说：
localStorage 用于长期存储数据，例如用户设置、购物车数据等。
sessionStorage 用于短期存储，例如表单数据、临时会话信息等。
5. localStorage 监听（storage 事件）
当 同一浏览器的不同页面 修改 localStorage 时，其他页面可以监听变化：
window.addEventListener("storage", (event) => {
console.log("localStorage 变化：", event);
});
⚠ 同一页面不会触发 storage 事件，只有其他页面修改 localStorage 才会触发。
6. 适用场景
记住用户设置（如夜间模式）
存储用户的购物车数据
本地缓存 API 请求结果
跨页面共享数据