当面试官问我了解哪些数据存储方式时，我是这样答的······

站长

2024年06月11日 23:08 · 阅读数 75

前言

当谈到JavaScript中的存储方式时，我们首先需要了解数据的存储在编程中的重要性。数据的存储方式不仅影响着程序的性能和效率，还直接关系到开发者在处理数据时的便利性和灵活性。JavaScript作为一种广泛应用于Web开发和应用程序开发的脚本语言，其存储方式涵盖了各种场景和需求，从简单的变量存储到复杂的数据结构和持久化存储方案。在本文中，我们将探讨JavaScript中常见的存储方式。通过深入了解这些存储方式的特点、用法和适用场景，我们可以更好地利用JavaScript来处理和管理数据，提升我们的开发效率和应用性能。

localStorage（本地储存）

这是一种最基础的存储方式，特点是存储时间永久（只要不进行手动删除），存储容量比较大。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button id="save">保存</button>
  <button id="get">读取</button>
  <button id="del">删除</button>
  <button id="clear">清空</button>
  <script>
    const user = {
      name: '小小',
      age: 18
    }
    document.getElementById('save').addEventListener('click', () => {
      localStorage.setItem('userInfo', JSON.stringify(user))
    })
    document.getElementById('get').addEventListener('click', () => {
      console.log(JSON.parse(localStorage.getItem('userInfo')));
    })
    document.getElementById('del').addEventListener('click', () => {
      localStorage.removeItem('userInfo')
    })
    document.getElementById('clear').addEventListener('click', () => {
      localStorage.clear()
    })
  </script>
</body>

</html>

四个按钮分别对应不同的功能，我们要知道的是我们存入对象时必须通过（setItem）转换成JSON字符串进行存储，否则看不见它的具体信息。通过（getItem）取出来的时候再转为（parse）存储的具体内容，（removeItem）是根据键名移除某个存储内容，而(clear)是清空本地存储全部内容。

当存入数据时：当面试官问我了解哪些数据存储方式时，我是这样答的······

当读取数据时：当面试官问我了解哪些数据存储方式时，我是这样答的······

当删除或清空数据时（因为我们只存入了一个数据，因此结果是一样的）当面试官问我了解哪些数据存储方式时，我是这样答的······

这是我们最常用的存储方式，虽简单但是实用。

sessionStorage（会话存储）

这个基本的使用方法和localStorage是一模一样的，性质也基本相同，除了一点，就是这个存储周期不是永久的，存储在 sessionStorage 里面的数据在页面会话结束时会被清除，存储内容就会消失。

我们首先存入一个数据当面试官问我了解哪些数据存储方式时，我是这样答的······

我们并没有手动删除或清除数据，只是重新打开了浏览器，这个时候我们的会话存储内容消失了。当面试官问我了解哪些数据存储方式时，我是这样答的······

而本地存储内容依然存在当面试官问我了解哪些数据存储方式时，我是这样答的······

大家只要记得这一点就好啦！

Web SQL和Cookies存储

这个我们只是提一下，并不作为重点内容来讲，前者 Web SQL（浏览器上的模拟数据库）由于现在浏览器的迭代大部分浏览器（比如谷歌）已经不支持这种存储方式了，然后Cookies存储是由后端控制的，并不受我们前端掌控。因此我们做个简单了解就OK。

高级的IndexedDB

这是这里面最高级的存储方式（浏览器提供的本地数据库），存储容量没有上限，取决于电脑内存，并且可以永久存储。里面的存储方式和我们的数据库有点像。

  <button onclick="openDB()">连接数据库</button>
  <button onclick="insertOneDB()">插入一条数据</button>
  <button onclick="insertMultiDB()">插入多条数据</button>
  <button onclick="queryDB()">查询数据</button>

我们首先设置四个点击按钮，分别是连接数据库，插入一条数据，插入多条数据，查询数据，然后绑定点击事件。

   const dbName = 'users'
    const dbVersion = 1.0
    let db = null

我们首先定义数据库的名字和版本号，然后设置全局变量db。

openDB()


    function openDB() {
      const request = indexedDB.open(dbName, dbVersion)
      request.onerror = function () {
        console.log('无法打开数据库');
      }

      // request.onupgradeneeded = function (event) {
      //   db = event.target.result
      //   // 创建一个表
      //   const objectStore = db.createObjectStore('sex', { keyPath: 'id' })
      //   objectStore.createIndex('title', 'title', { unique: true })
      // }

      request.onsuccess = function (event) {
        // console.log(event);
        // db = event.target.result
        // console.log(`数据库${db.name}已经开启`);
        console.log(event);
      }
    }

我们先看没被注释的部分，首先我们打开一个数据库，放入我们自己给的名字和版本号，然后如果错误就打印失败，如果成功我们先打印这个参数。

当面试官问我了解哪些数据存储方式时，我是这样答的······

大家可以发现event.target.result里面存储的就是我们这个数据库的相关信息。里面就是一个对象。因此如果我们在成功的回调函数里不进行注释，结果是这样的。

当面试官问我了解哪些数据存储方式时，我是这样答的······

insertOneDB()

 function insertOneDB() {
      const transaction = db.transaction(['sex'], 'readwrite')
        .objectStore('sex')
        .add({ id: 1, title: '男生', author: '张三', createAt: Date.now() })

      transaction.onerror = function () {
        console.log('数据写入失败');
      }
      transaction.onsuccess = function () {
        console.log('数据写入成功');
      }
    }

我们首先定义一个事务，这个事务用作对数据库的数组里的对象进行读写操作，我们对这个事务里的sex进行操作，增加一个新的对象，并且监听成功和失败。

 request.onupgradeneeded = function (event) {
        db = event.target.result
        // 创建一个表
        const objectStore = db.createObjectStore('sex', { keyPath: 'id' })
        objectStore.createIndex('title', 'title', { unique: true })
      }

这个时候我们新建表的注释部分也发挥了作用，我们设置表名为sex，主键为id，并且设置索引title（索引名）对应title（值），设置索引值必须唯一。

我们看看操作后的结果。

当面试官问我了解哪些数据存储方式时，我是这样答的······

这张图可以让大家非常了解我们的插入操作。索引和key是有的，具体信息也有。

insertMultiDB()


    function insertMultiDB() {
      const data = [
        { id: 2, title: '男生1', author: '李四', createAt: Date.now() },
        { id: 3, title: '女生', author: '李五', createAt: Date.now() },
        { id: 4, title: '男生3', author: '李六', createAt: Date.now() },
        { id: 5, title: '男生4', author: '李七', createAt: Date.now() },
      ]
      const transaction = db.transaction(['sex'], 'readwrite')
      const objectStore = transaction.objectStore('sex')
      data.forEach((item) => {
        const request = objectStore.add(item)
        request.onsuccess = function () {
          console.log('成功添加');
        }
      })
      transaction.oncomplete = function () {
        console.log('写入完成');
        db.close()
      }
    }

基本思路和插入一条数据是类似的，无非就是采用forEach循环的形式加入。但是这里有一点需要注意，就是我们插入完毕后会关闭，就说明我们下次进行操作的时候需要重新开启数据库了。

queryDB()

   function queryDB() {
      const transaction = db.transaction(['sex'], 'readonly')
      const objectStore = transaction.objectStore('sex')
      const index = objectStore.index('title')
      // const req = objectStore.get(1)
      // req.onerror = function () {
      //   console.log('查找失败');
      // }
      // req.onsuccess = function () {
      //   console.log(req.target.result);
      // }

      // 拿到某些数据

      const range = IDBKeyRange.only('女生')
      const request = index.openCursor(range)


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

    }

当面试官问我了解哪些数据存储方式时，我是这样答的······ 我们的这个数据查询是根据索引来找的，对事务中的sex进行只读操作。获取索引。然后我们查索引为‘女生’的对象，最后打印结果。

转载自:https://juejin.cn/post/7376073065334505509