【本地持久化】功能-总结

需求：

例如：搜索历史需要持久化，刷新历史不丢失

核心点：

localStorage.setItem 和 localStorage.getItem 是浏览器提供的用于本地存储数据的两个方法

1. localStorage.setItem(key, value)

功能：将数据以键值对的形式存储到浏览器的本地存储中。

参数：

•   key：存储数据的键，必须是字符串。
•   value：存储的数据，也必须是字符串。如果需要存储对象或其他复杂类型，需使用 JSON.stringify 转换为字符串。

特点：

• 如果键已存在，则更新其对应的值；如果键不存在，则创建新的键值对。
• 数据会一直保留在浏览器中，直到用户手动清除或通过代码删除。
  

 localStorage.setItem('username', 'Alice');const user = { name: 'Bob', age: 18 };localStorage.setItem('userDetails', JSON.stringify(user));

2. localStorage.getItem(key)

功能：根据键从浏览器的本地存储中获取对应的值。

参数：

key：要获取数据的键，必须是字符串。

返回值：

• 如果键存在，返回对应的值（字符串类型）。
• 如果键不存在，返回 null。

特点：如果存储的是复杂类型（如对象），需使用 JSON.parse 将字符串转换为原始类型。

 const username = localStorage.getItem('username');const userDetails = JSON.parse(localStorage.getItem('userDetails'));console.log(username); // 输出: Aliceconsole.log(userDetails); // 输出: { name: 'Bob', age: 18 }

分析实现步骤：

1. 持久化到本地 - 封装方法

2. 页面中调用 - 实现持久化