JS本地持久化 - 技术栈

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

1.使用localStorage

javascript 复制代码

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

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

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

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

2.使用indexedDB

javascript 复制代码

// 打开数据库
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 中的数据。

示例：

javascript 复制代码

// 存储数据到 sessionStorage
sessionStorage.setItem('username', 'exampleUser');

// 从 sessionStorage 获取数据
var username = sessionStorage.getItem('username');
console.log(username); // 输出: exampleUser

// 移除特定键的数据
sessionStorage.removeItem('username');

// 清除所有数据
sessionStorage.clear();

使用 sessionStorage 时需要注意以下几点：

存储在 sessionStorage 中的数据仅在同一浏览器选项卡或窗口处于打开状态时有效。
存储在 sessionStorage 中的数据在用户关闭浏览器或标签页后将会被清除。
数据以键值对的形式存储，键和值都必须是字符串。

由于数据存储在客户端，因此可以被用于在页面之间共享数据，或者在不同的页面中保持用户的会话状态。