【JavaScript】本地存储

在JavaScript中，本地存储是一种可以在浏览器中存储数据的机制。它允许开发者在浏览器中保存键值对，并且这些数据可以在同一个域名下的不同页面间进行共享。

JavaScript中常用的本地存储机制有两种：localStorage 和 sessionStorage。

1. localStorage:

• localStorage 在整个浏览器窗口关闭后仍然保留数据，因此可以用于持久化存储。

• localStorage 对象存储的数据没有过期时间，除非手动删除或清除浏览器缓存。

• 使用示例：

// 存储数据     
localStorage.setItem('key', 'value');    
// 获取数据     
const value = localStorage.getItem('key');     
// 删除数据     
localStorage.removeItem('key');     
// 清除所有数据     
localStorage.clear();     

2. sessionStorage:

• sessionStorage 仅在当前会话（当前浏览器标签页或窗口）中保留数据，在关闭会话后数据会被清除。

• sessionStorage 也使用键值对的形式存储数据，API与 localStorage 类似。

• 使用示例：

 // 存储数据     
 sessionStorage.setItem('key', 'value');     
 // 获取数据     
 const value = sessionStorage.getItem('key');    
 // 删除数据     
 sessionStorage.removeItem('key');     
 // 清除所有数据     
 sessionStorage.clear(); 

两种本地存储机制都只能存储字符串类型的数据。

如果要存储其他类型的数据，可以通过 JSON 序列化和反序列化来实现：

// 存储对象
const obj = { key: 'value' };
localStorage.setItem('key', JSON.stringify(obj));
// 获取对象
const storedValue = localStorage.getItem('key');
const obj = JSON.parse(storedValue);

需要注意的是，对于安全性敏感的数据，如用户凭证或个人隐私信息，应避免在本地存储中存储，而应考虑使用服务器端的认证和加密机制来保护数据安全。