JavaScript本地存储的几种方式小结

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

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

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

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

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

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

// 移除数据
sessionStorage.removeItem('key');

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

// 设置 Cookie
document.cookie = "username=John Doe; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/";

// 读取 Cookie
function getCookie(name) {
  let cookieArr = document.cookie.split(";");

  for(let i = 0; i < cookieArr.length; i++) {
    let cookiePair = cookieArr[i].split("=");

    if(name == cookiePair[0].trim()) {
      return decodeURIComponent(cookiePair[1]);
    }
  }

  return null;
}

const username = getCookie("username");

// 删除 Cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

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

request.onupgradeneeded = function(event) {
  let db = event.target.result;
  let objectStore = db.createObjectStore("customers", { keyPath: "id" });
};

request.onsuccess = function(event) {
  let db = event.target.result;

  // 添加数据
  let transaction = db.transaction(["customers"], "readwrite");
  let objectStore = transaction.objectStore("customers");
  let customer = {id: 1, name: "John Doe", age: 30};
  objectStore.add(customer);

  // 读取数据
  let transaction = db.transaction(["customers"]);
  let objectStore = transaction.objectStore("customers");
  let request = objectStore.get(1);

  request.onerror = function(event) {
    console.log("Unable to retrieve data");
  };

  request.onsuccess = function(event) {
    if (request.result) {
      console.log(request.result.name);
    } else {
      console.log("No data found");
    }
  };
};