如何存储和提取本地存储 - Javascript

在开发Web应用程序时，通常需要在客户端存储一些数据。本地存储是一种在客户端浏览器中存储数据的技术。有两种主要的本地存储技术，分别是Web Storage和IndexedDB。

Web Storage

Web Storage提供了两个API方法，用于在客户端浏览器中存储数据。它们分别是localStorage和sessionStorage。

localStorage

localStorage是一个键值对存储方式，可以将数据永久性地存储在客户端浏览器中。可以通过setItem(key, value)方法将数据存储到localStorage中，也可以通过getItem(key)方法获取存储在localStorage中的数据。

// 存储数据到localStorage中
localStorage.setItem('name', '张三');

// 从localStorage中获取数据
const name = localStorage.getItem('name');
console.log(name); // 张三

localStorage中的数据可以通过removeItem(key)方法移除，也可以通过clear()方法清空localStorage中的所有数据。

sessionStorage

sessionStorage是同样是一个键值对存储方式，但是存储在其中的数据只在浏览器会话期间有效。即使用户关闭浏览器标签页之后再次打开，存储在sessionStorage中的数据也会被清除掉。

// 存储数据到sessionStorage中
sessionStorage.setItem('name', '张三');

// 从sessionStorage中获取数据
const name = sessionStorage.getItem('name');
console.log(name); // 张三

sessionStorage中的数据可以通过removeItem(key)方法移除，也可以通过clear()方法清空sessionStorage中的所有数据。

IndexedDB

IndexedDB是一种更为高级的客户端浏览器本地存储技术，支持大量数据的存储和检索。IndexedDB是一个对象数据库系统，允许存储不仅仅是简单的键值对，还可以存储复杂的数据结构。

创建数据库

IndexedDB使用一个异步API来操作数据库。在首次使用IndexedDB之前，需要先创建一个数据库。可以通过IDBFactory.open(databaseName, version)方法来创建数据库。

// 创建名为“myDatabase”的IndexedDB数据库，版本号为1
const request = indexedDB.open("myDatabase", 1);

request.onerror = function(event) {
  console.log("IndexedDB数据库打开失败");
};

request.onsuccess = function(event) {
  console.log("IndexedDB数据库打开成功");
};

// 首次打开数据库时触发此事件
request.onupgradeneeded = function(event) {
  const db = event.target.result;

  // 创建一个名为“students”的对象仓库
  const objectStore = db.createObjectStore("students", { keyPath: "id" });

  // 为对象仓库创建一个名为“name”的索引
  objectStore.createIndex("name", "name", { unique: false });
};

存储数据

存储数据到IndexedDB中需要通过对象仓库。可以使用IDBTransaction.transaction()方法开启一个事务，并通过IDBDatabase.transaction.objectStore(objectStoreName)方法打开一个对象仓库。

const request = indexedDB.open("myDatabase", 1);

request.onerror = function(event) {
  console.log("IndexedDB数据库打开失败");
};

request.onsuccess = function(event) {
  const db = event.target.result;
  const transaction = db.transaction(["students"], "readwrite");
  const objectStore = transaction.objectStore("students");

  // 存储一个名为“张三”的学生到对象仓库中
  objectStore.put({ id: 1, name: "张三", age: 20 });

  // 存储一个名为“李四”的学生到对象仓库中
  objectStore.put({ id: 2, name: "李四", age: 21 });
};

检索数据

从IndexedDB中检索数据也需要通过对象仓库。可以使用IDBTransaction.transaction()方法开启一个事务，并通过IDBDatabase.transaction.objectStore(objectStoreName)方法打开一个对象仓库。

const request = indexedDB.open("myDatabase", 1);

request.onerror = function(event) {
  console.log("IndexedDB数据库打开失败");
};

request.onsuccess = function(event) {
  const db = event.target.result;
  const transaction = db.transaction(["students"], "readonly");
  const objectStore = transaction.objectStore("students");

  // 通过id检索数据
  const request = objectStore.get(1);

  request.onsuccess = function(event) {
    console.log(event.target.result);
  };

  // 通过索引检索数据
  const index = objectStore.index("name");
  const range = IDBKeyRange.only("张三");

  const cursorRequest = index.openCursor(range);

  cursorRequest.onsuccess = function(event) {
    const cursor = event.target.result;
    if (cursor) {
      console.log(cursor.value);
      cursor.continue();
    } else {
      console.log("检索完成");
    }
  };
};

删除数据

从IndexedDB中删除数据也需要通过对象仓库。可以使用IDBTransaction.transaction()方法开启一个事务，并通过IDBDatabase.transaction.objectStore(objectStoreName)方法打开一个对象仓库。

const request = indexedDB.open("myDatabase", 1);

request.onerror = function(event) {
  console.log("IndexedDB数据库打开失败");
};

request.onsuccess = function(event) {
  const db = event.target.result;
  const transaction = db.transaction(["students"], "readwrite");
  const objectStore = transaction.objectStore("students");

  // 通过id删除数据
  objectStore.delete(1);

  // 通过索引删除数据
  const index = objectStore.index("name");
  const request = index.openCursor(IDBKeyRange.only("张三"));

  request.onsuccess = function(event) {
    const cursor = event.target.result;
    if (cursor) {
      cursor.delete();
      cursor.continue();
    }
  };
};