localStorage 得使用示例

localStorage 是 Web 存储 API 的一部分，允许在用户的浏览器中存储数据，且这些数据会跨会话（即关闭浏览器后重新打开）持久存在，直到被显式删除。以下是一个使用 localStorage 的基本示例，展示了如何存储、获取和删除数据。

存储数据

可以使用 setItem(key, value) 方法来存储数据。这里，key 是数据的名称（或键），而 value 是你想要存储的数据。请注意，value 必须是一个字符串。如果想要存储非字符串数据（如对象或数组），需要先使用 JSON.stringify() 方法将其转换为字符串。

// 存储一个字符串  
localStorage.setItem('username', 'JohnDoe');  
  
// 存储一个对象（需要先转换为字符串）  
var user = { name: 'JaneDoe', age: 30 };  
localStorage.setItem('user', JSON.stringify(user));

获取数据

可以使用 getItem(key) 方法来获取之前存储的数据。如果找到了指定的 key，则返回对应的 value（作为字符串）。如果没有找到，则返回 null。如果之前存储的是一个对象或数组，并希望再次以原始数据类型使用它，需要使用 JSON.parse() 方法将其从字符串转换回对象或数组。

// 获取并显示字符串  
var username = localStorage.getItem('username');  
console.log(username); // 输出: JohnDoe  
  
// 获取并解析对象  
var storedUser = localStorage.getItem('user');  
var user = JSON.parse(storedUser);  
console.log(user.name); // 输出: JaneDoe

删除数据

可以使用 removeItem(key) 方法来删除存储在 localStorage 中的特定数据项。

// 删除用户名  
localStorage.removeItem('username');  
  
// 尝试获取已删除的用户名，将返回 null  
var deletedUsername = localStorage.getItem('username');  
console.log(deletedUsername); // 输出: null

清除所有数据

如果想要清除 localStorage 中的所有数据，可以使用 clear() 方法。

// 清除 localStorage 中的所有数据  
localStorage.clear();  
  
// 尝试获取之前存储的用户对象，将返回 null  
var clearedUser = localStorage.getItem('user');  
console.log(clearedUser); // 输出: null

请注意，由于 localStorage 的数据存储在用户的浏览器中，因此任何存储在此处的数据都应被视为敏感信息，并应谨慎处理。此外，存储的数据大小也受到浏览器实现和用户设置的限制。