本地缓存如何做到持久化

本地缓存可以通过使用localStorage或IndexedDB来实现持久化。其中，localStorage是一种简单的键值对存储方式，可以将数据存储在浏览器中，即使关闭浏览器也不会丢失数据。而IndexedDB则是一种更为强大的本地数据库，可以存储更复杂的数据结构，并支持事务和索引等功能。

以下是使用localStorage实现本地缓存持久化的示例代码：

// 存储数据
localStorage.setItem('key', 'value');

// 获取数据
const value = localStorage.getItem('key');

// 删除数据
localStorage.removeItem('key');

以下是使用IndexedDB实现本地缓存持久化的示例代码：

// 打开数据库
const request = indexedDB.open('myDatabase', 1);

// 创建对象仓库
request.onupgradeneeded = function(event) {
  const db = event.target.result;
  const objectStore = db.createObjectStore('myObjectStore', { keyPath: 'id' });
};

// 存储数据
request.onsuccess = function(event) {
  const db = event.target.result;
  const transaction = db.transaction(['myObjectStore'], 'readwrite');
  const objectStore = transaction.objectStore('myObjectStore');
  objectStore.add({ id: 1, data: 'value' });
};

// 获取数据
request.onsuccess = function(event) {
  const db = event.target.result;
  const transaction = db.transaction(['myObjectStore'], 'readonly');
  const objectStore = transaction.objectStore('myObjectStore');
  const request = objectStore.get(1);
  request.onsuccess = function(event) {
    const value = event.target.result.data;
  };
};

// 删除数据
request.onsuccess = function(event) {
  const db = event.target.result;
  const transaction = db.transaction(['myObjectStore'], 'readwrite');
  const objectStore = transaction.objectStore('myObjectStore');
  objectStore.delete(1);
};