前端知识点---本地存储(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();

2. 存储对象
   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 请求结果

跨页面共享数据