浏览器存储这块相对简单,这里就不再过多赘述。下面简单列举了一份大纲,一图胜前言吧。

indexedDB 一般我们在项目中用到不算多,下面简单举了个例子,简单演示下它的使用,从例子中我们看到,里面有好多回调,操作起来好繁琐,一点不优雅。假设我们在项目中的真的需要用使用 indexedDB 做数据的存储,推荐使用 localForage (opens new window) 这个库来进行相应操作,具体使用请阅读官方文档,这里不再赘述。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    let db,
      request,
      version = 1

    request = indexedDB.open('admin', version)
    request.onerror = function(e) {
      alert(`Failed to open: ${e.target.errorCode}`)
    }
    request.onsuccess = function(e) {
      db = e.target.result
      operate(db)
    }

    request.onupgradeneeded = function(e) {
      db = e.target.result
      if (!db.objectStoreNames.contains('users')) {
        db.createObjectStore('users', {keyPath: 'username'})
      }
    }

    function operate(db) {
      const transaction = db.transaction('users', 'readwrite')
      const store = transaction.objectStore('users')

      const user = {
        username: '007',
        name: 'f',
        age: 18
      }
      addOrGet(store, 'add', user)
    }

    function addOrGet(store, method,value) {
      const request = store[method](value)
      request.onerror = e => console.log('err msg ->', e.target.error)
      request.onsuccess = e => console.log('res', e.target.result)
    }

  </script>
</body>
</html>