Browser storage scheme

One 、 Storage scheme I (localStorage/sessionStorage)

1、localStorage/sessionStorage

2、localStorage/sessionStorage Common methods

// 1、setItem
localStorage.setItem("name", "chen123");
localStorage.setItem("age", 13);

// 2、length
console.log(localStorage.length);
for (let i = 0; i < localStorage.length; i++) {
    
  const key = localStorage.key(i);
  console.log(localStorage.getItem(key));
}

// 3、key Method 
console.log(localStorage.key(0)); //age

// 4、getItem(key)
console.log(localStorage.getItem("age")); // 13

// 5、removeItem
localStorage.removeItem("age");

// 6、clear Method 
localStorage.clear();

3、localStorage/sessionStorage encapsulation

class Cache {
    
  constructor(isLocal = true) {
    
    this.storage = isLocal ? localStorage : sessionStorage;
  }

  setCache(key, value) {
    
    if (value) this.storage.setItem(key, JSON.stringify(value));
  }

  getCache(key) {
    
    let value = this.storage.getItem(key);
    if (value) value = JSON.parse(value);
  }

  removeItem(key) {
    
    this.storage.removeItem(key);
  }

  clear() {
    
    this.storage.clear();
  }

  key(index) {
    
    return this.storage.key(index);
  }

  length() {
    
    return this.storage.length;
  }
}

const localCache = new Cache();
const sessionCache = new Cache(false);

export {
     localCache, sessionCache };

Two 、 Storage scheme II （indexDB）

Understanding can

1、indexeDB Process of use

// 1、 Open database （ The process of establishing a connection ）
const dbRequest = indexedDB.open("chen"); //  Get an object , We can write some callback functions for listening 
dbRequest.onerror = function (err) {
    
  console.log("err Failed to open database ", err);
};

let db = null;
dbRequest.onsuccess = function (event) {
    
  db = event.target.result;
};

//  Open the database for the first time / Or the new version is updated 
dbRequest.onupgradeneeded = function (event) {
    
  const db = event.target.result;
  //  Create some storage objects , amount to mysql In the table , keypath: Primary key 
  db.createObjectStore("users", {
     keyPath: "id" });
};

class User {
    
  constructor(id, name, age) {
    
    this.id = id;
    this.name = name;
    this.age = age;
  }
}
const users = [
  new User(1, "zhangsan", 21),
  new User(2, "lisi", 22),
  new User(3, "wangwu", 34),
];

//  obtain btns, Monitor click 
const btns = document.querySelectorAll("button");
// console.log(btns);
btns.forEach((item, index) => {
    
  console.log(item, index);
  item.onclick = function () {
    
    //  Create new things every time 
    const transaction = db.transaction("users", "readwrite");
    console.log(transaction);
    //  Because of the above transaction It can be transmitted to multiple ,db.transaction(["users", "students"], 'readwrite')
    const store = transaction.objectStore("users");

    switch (index) {
    
      case 0:
        console.log(" Click Add ");
        for (const user of users) {
    
          const request1 = store.add(user);
          request1.onsuccess = function () {
    
            console.log(`${
      user.name} Insert the success `);
          };
        }
        //  The successful operation of things will call back oncomplete
        transaction.oncomplete = function () {
    
          console.log(" Add all successfully ");
        };
        break;
      case 1:
        console.log(" Click query ");
        // 1. Query method 1 ：( Know primary key , Query according to the primary key )
        // const request = store.get(1);
        // request.onsuccess = function(event){
    
        // console.log(event.target.result);
        // }

        // 2、 Query method 2 ：( Query all )
        const request = store.openCursor();
        request.onsuccess = function (event) {
    
          const cursor = event.target.result;
          if (cursor) {
    
            console.log(cursor.key, cursor.value);
            //  Keep going 
            cursor.continue();
          } else {
    
            console.log(" Query complete ");
          }
        };
        break;
      case 2:
        console.log(" Click delete ");
        const request3 = store.openCursor();
        request3.onsuccess = function (event) {
    
          const cursor = event.target.result;
          if (cursor) {
    
            console.log(cursor.key, cursor.value);
            //  Keep going 
            if (cursor.key === 1) {
    
              cursor.delete();
            }
            cursor.continue();
          } else {
    
            console.log(" Query complete ");
          }
        };
        break;
      case 3:
        console.log(" Click Modify ");
    }
  };
});