前端存取LocalStorage的案例

一、前言

LocalStorage 提供了一种在用户浏览器中存储数据的方式，数据在页面刷新后依然保留。以下是使用 JavaScript 操作 LocalStorage 进行数据存储和读取的基本案例。

二、案例

2.1 存储数据到 LocalStorage

假设您想要存储一个名为 music_id 的数据项，其值为 123。可以使用 localStorage.setItem 方法来实现：

// 存储数据

localStorage.setItem('music_id', '123');

2.2从 LocalStorage 读取数据 

要从 LocalStorage 中读取之前存储的 music_id 值，可以使用 localStorage.getItem 方法：

 // 读取数据

var musicId = localStorage.getItem('music_id');

console.log(musicId); // 输出: 123

这行代码会从 LocalStorage 中检索键名为 music_id 的项的值，并将其赋值给变量 musicId。 

2.3检查 LocalStorage 中是否存在某个键 

在尝试读取 LocalStorage 中的数据之前，可能想要检查该键是否存在。这可以通过直接检查 getItem 方法的返回值是否为 null 来实现： 

if (localStorage.getItem('music_id') === null) {

        console.log('music_id 不存在');

} else {

console.log('music_id 存在');

}

2.4删除 LocalStorage 中的数据

 如果想要从 LocalStorage 中删除之前存储的数据，可以使用 localStorage.removeItem 方法

// 删除特定的数据项

localStorage.removeItem('music_id'); 

 这行代码将会从 LocalStorage 中删除键名为 music_id 的项。

2.5 清空 LocalStorage

如果想要清空 LocalStorage 中存储的所有数据，可以使用 localStorage.clear 方法：

// 清空所有数据，这行代码会移除 LocalStorage 中的所有项。

localStorage.clear(); 

三、使用说明

3.1 注意事项 

• LocalStorage 中存储的数据没有过期时间，数据会一直保存在浏览器中，直到被清除。
• LocalStorage 存储的数据量上限大约为 5MB。
• 存储在 LocalStorage 的数据仅限于字符串。如果您需要存储对象，可以通过 JSON.stringify 方法将对象转换为字符串进行存储，读取时再通过 JSON.parse 方法将字符串转换回对象。

 3.2 存储和读取一个对象

// 存储对象
var user = { name: '张三', age: 30 };
localStorage.setItem('user', JSON.stringify(user));

// 读取对象
var storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser.name); // 输出: 张三

存的时字符串对象，解析为对象才能被操作。