JS本地持久化

要将数据持久化到本地存储中，可以使用浏览器提供的localStorage或indexedDB等机制。下面分别介绍这两种方式的用法：

1.使用localStorage

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

localStorage提供了setItem方法来存储数据，getItem方法来获取数据，removeItem方法来删除数据。存储的数据将以键值对的形式存储在浏览器的本地存储中，并且在浏览器关闭后仍然可用。

2.使用indexedDB

// 打开数据库
const request = window.indexedDB.open('database', 1);// 监听数据库打开成功事件
request.onsuccess = function(event) {const db = event.target.result;// 创建事务const transaction = db.transaction(['store'], 'readwrite');// 获取存储对象const store = transaction.objectStore('store');// 存储数据store.put('value', 'key');// 获取数据const getRequest = store.get('key');getRequest.onsuccess = function(event) {const data = event.target.result;console.log(data);};// 删除数据store.delete('key');
};

使用indexedDB需要先打开数据库，并创建事务和存储对象，然后可以使用存储对象的put方法来存储数据，get方法来获取数据，delete方法来删除数据。indexedDB是一种更底层的存储机制，相比于localStorage提供了更多的功能和灵活性。

选择使用localStorage还是indexedDB取决于你的具体需求。如果只是简单地存储少量的数据，并且不需要进行复杂的查询操作，localStorage是一个简单方便的选择。如果需要存储大量的数据，并进行复杂的查询和索引，则可以考虑使用indexedDB。

3.使用sessionStorage

除了以上两种还有其他方式可以存储数据，例如sessionStorage。
sessionStorage 是浏览器提供的一种用于临时数据存储的机制，它与 localStorage 类似，但是数据存储的生命周期与单个会话（session）相对应。

具体来说，sessionStorage 对象允许你在浏览器会话期间存储键值对的数据。这意味着只要用户保持着浏览器窗口或标签页的打开状态，存储在 sessionStorage 中的数据就会保持存在，但一旦会话结束（用户关闭所有相关的浏览器窗口或标签页），存储在其中的数据就会被清除。

下面是一些常用的 sessionStorage 操作方法：

sessionStorage.setItem(key, value): 将指定的键值对存储到 sessionStorage 中。
sessionStorage.getItem(key): 获取指定键对应的值。
sessionStorage.removeItem(key): 从 sessionStorage 中移除指定的键值对。
sessionStorage.clear(): 清除所有存储在 sessionStorage 中的数据。

示例：

// 存储数据到 sessionStorage
sessionStorage.setItem('username', 'exampleUser');// 从 sessionStorage 获取数据
var username = sessionStorage.getItem('username');
console.log(username); // 输出: exampleUser// 移除特定键的数据
sessionStorage.removeItem('username');// 清除所有数据
sessionStorage.clear();