27_Storage

title: Storage
categories: Javascript
tag:

• storage
  date: 2021-11-30 11:35:34

认识 Storage

WebStorage 主要提供了一种机制，可以让浏览器提供一种比 cookie 更直观的 key、value 存储方式：

• localStorage：本地存储，提供的是一种永久性的存储方法，在关闭掉网页重新打开时，存储的内容依然保留；
• sessionStorage：会话存储，提供的是本次会话的存储，在关闭掉会话时，存储的内容会被清除；

localStorage 和 sessionStorage 区别

我们会发现 localStorage 和 sessionStorage 看起来非常的相似。

那么它们有什么区别呢？

• 验证一：关闭网页后重新打开，localStorage 会保留，而 sessionStorage 会被删除；
• 验证二：在页面内实现跳转，localStorage 会保留，sessionStorage 也会保留；
• 验证三：在页面外实现跳转（打开新的网页），localStorage 会保留，sessionStorage 不会被保留；

Storage 常见的方法和属性

Storage 有如下的属性和方法：

属性：

• Storage.length：只读属性
  1. 返回一个整数，表示存储在 Storage 对象中的数据项数量；

方法：

• Storage.key()：该方法接受一个数值 n 作为参数，返回存储中的第 n 个 key 名称；
• Storage.getItem()：该方法接受一个 key 作为参数，并且返回 key 对应的 value；
• Storage.setItem()：该方法接受一个 key 和 value，并且将会把 key 和 value 添加到存储中。
  1. 如果 key 存储，则更新其对应的值；
• Storage.removeItem()：该方法接受一个 key 作为参数，并把该 key 从存储中删除；
• Storage.clear()：该方法的作用是清空存储中的所有 key；

封装 Storage

class HyCache {
  constructor(isLocal = true) {
    this.storage = isLocal ? localStorage : sessionStorage
  }
  setItem(key, value) {
    if (value) {
      this.storage.setItem(key, JSON.stringify(value))
    }
  }
  getItem(key) {
    let value = this.storage.getItem(key)
    if (value) {
      value = JSON.parse(value)
      return 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 HyCache()
const sessionCache = new HyCache()
export { localCache, sessionCache }

认识 IndexedDB

什么是 IndexedDB 呢？

• 我们能看到 DB 这个词，就说明它其实是一种数据库（Database），通常情况下在服务器端比较常见；
• 在实际的开发中，大量的数据都是存储在数据库的，客户端主要是请求这些数据并且展示；
• 有时候我们可能会存储一些简单的数据到本地（浏览器中），比如 token、用户名、密码、用户信息等，比较少存储大量的数据；
• 那么如果确实有大量的数据需要存储，这个时候可以选择使用 IndexedDB；

IndexedDB 是一种底层的 API，用于在客户端存储大量的结构化数据。

• 它是一种事务型数据库系统，是一种基于 JavaScript 面向对象数据库，有点类似于 NoSQL（非关系型数据库）；
• IndexDB 本身就是基于事务的，我们只需要指定数据库模式，打开与数据库的连接，然后检索和更新一系列事务即可；

IndexedDB 的连接数据库

第一步：打开 indexDB 的某一个数据库；

1. 通过 indexDB.open(数据库名称, 数据库版本)方法；
2. 如果数据库不存在，那么会创建这个数据；
3. 如果数据库已经存在，那么会打开这个数据库；

第二步：通过监听回调得到数据库连接结果；

1. 数据库的 open 方法会得到一个IDBOpenDBRequest类型
2. 我们可以通过下面的三个回调来确定结果：
   • onerror：当数据库连接失败时；
   • onsuccess：当数据库连接成功时回调；
   • onupgradeneeded：当数据库的 version 发生变化并且高于之前版本时回调；
     • 通常我们在这里会创建具体的存储对象：db.createObjectStore(存储对象名称, { keypath: 存储的主键 })
3. 我们可以通过 onsuccess 回调的 event 获取到 db 对象：event.target.result

//why相当于数据库的库
const dbRequest = indexedDB.open('why')
dbRequest.onerror = function (err) {
  console.log('打开数据库失败')
}
let db = null
dbRequest.onsuccess = function (event) {
  db = event.target.result
}
// 第一次打开或者版本更新
dbRequest.onupgradeneeded = function (event) {
  const db = event.target.result
  //创建一些存储对象.
  // users相当于数据库中的表
  // keyPath相当于数据库中的primary key
  db.createObjectStore('users', { keyPath: 'id' })
}

IndexedDB 的数据库操作

新增

我们先以构造函数的方式批量新建对象

class User {
  constructor(id, name, age) {
    this.id = id
    this.name = name
    this.age = age
  }
}
const users = [
  new User(100, 'why', 18),
  new User(101, 'dh', 22),
  new User(102, 'gwk', 22),
  new User(103, 'kk', 30)
]

然后点击新增按钮。插入数据

查询

      case 1:
        console.log('点击了查询')
        //查询方式1:(根据主键查询)
        const request = store.get(102)
        request.onsuccess = function (event) {
          console.log(event.target.result)
        }
        break

批量查询

      case 1:
        console.log('点击了查询')
                const request = store.openCursor()
        request.onsuccess = function (event) {
          const cursor = event.target.result
          if (cursor) {
            console.log(cursor.key, cursor.value)
            cursor.continue()
          } else {
            console.log('查询完成')
          }
        }
        break

修改

      case 2:
        console.log('点击了修改')
        const updateRequest = store.openCursor()
        updateRequest.onsuccess = function (event) {
          const cursor = event.target.result
          if (cursor) {
            if (cursor.key === 101) {
              const value = cursor.value
              value.name = 'curry'
              cursor.update(value)
              console.log('修改成功')
            } else {
              cursor.continue()
            }
          }
        }
        break

删除

      case 3:
        console.log('点击了删除')
        const deleteRequest = store.openCursor()
        deleteRequest.onsuccess = function (event) {
          const cursor = event.target.result
          if (cursor) {
            if (cursor.key === 101) {
              cursor.delete()
              console.log('删除成功')
            } else {
              cursor.continue()
            }
          }
        }

完整代码

const dbRequest = indexedDB.open('why')
dbRequest.onerror = function (err) {
  console.log('打开数据库失败')
}
let db = null
dbRequest.onsuccess = function (event) {
  db = event.target.result
}
// 第一次打开或者版本更新
dbRequest.onupgradeneeded = function (event) {
  const db = event.target.result
  //创建一些存储对象.
  // users相当于数据库中的表
  // 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(100, 'why', 18),
  new User(101, 'dh', 22),
  new User(102, 'gwk', 22),
  new User(103, 'kk', 30)
]
const btns = document.querySelectorAll('button')
for (let i = 0; i < btns.length; i++) {
  btns[i].onclick = function () {
    const transaction = db.transaction('users', 'readwrite')
    const store = transaction.objectStore('users')
    switch (i) {
      case 0:
        console.log('点击了新增')
        for (const user of users) {
          const request = store.add(user)
          request.onsuccess = function () {
            console.log(`插入${user.name}成功`)
          }
        }
        transaction.oncomplete = function () {
          console.log('添加操作全部完成')
        }
        break
      case 1:
        console.log('点击了查询')
        //查询(根据主键查询)
        // const request = store.get(102)
        // request.onsuccess = function (event) {
        //   console.log(event.target.result)
        // }
        const request = store.openCursor()
        request.onsuccess = function (event) {
          const cursor = event.target.result
          if (cursor) {
            console.log(cursor.key, cursor.value)
            cursor.continue()
          } else {
            console.log('查询完成')
          }
        }
        break
      case 2:
        console.log('点击了修改')
        const updateRequest = store.openCursor()
        updateRequest.onsuccess = function (event) {
          const cursor = event.target.result
          if (cursor) {
            if (cursor.key === 101) {
              const value = cursor.value
              value.name = 'curry'
              cursor.update(value)
              console.log('修改成功')
            } else {
              cursor.continue()
            }
          }
        }
        break
      case 3:
        console.log('点击了删除')
        const deleteRequest = store.openCursor()
        deleteRequest.onsuccess = function (event) {
          const cursor = event.target.result
          if (cursor) {
            if (cursor.key === 101) {
              cursor.delete()
              console.log('删除成功')
            } else {
              cursor.continue()
            }
          }
        }
    }
  }
}