浏览器存储

面向bug编程
180 阅读4分钟

学习了coderwhy的JavaScript高级语法视频课的笔记

如有错误或者不合适的地方，敬请见谅，欢迎指出和拓展，谢谢各位了

1. Storage

  1. 认识Storage
  • WebStorage主要提供了一种机制，可以让浏览器提供一种比cookie更直观的key、value存储方式
    • localStorage：本地存储，提供的是一种永久性的存储方法，在关闭掉网页重新打开时，存储的内容依然保留；
    • sessionStorage：会话存储，提供的是本次会话的存储，在关闭掉会话时，存储的内容会被清除。
  1. localStorage和sessionStorage的区别
  • 关闭网页后重新打开，localStorage会保留，而sessionStorage会被删除；
  • 在页面内实现跳转，localStorage会保留，sessionStorage也会保留；
  • 在页面外实现跳转（打开新的网页），localStorage会保留，sessionStorage不会被保留。
  1. Storage常见的方法和属性

Storage有如下的属性和方法：

  • 属性：
    • Storage.length：只读属性
      • 返回一个整数，表示存储在Storage对象中的数据项数量。
  • 方法：
    • Storage.key()：该方法接受一个数值n作为参数，返回存储中的第n个key名称；
    • Storage.getItem()：该方法接受一个key作为参数，并且返回key对应的value；
    • Storage.setItem()：该方法接受一个key和value，并且将会把key和value添加到存储中；
      • 如果key存储，则更新其对应的值。
    • Storage.removeItem()：该方法接受一个key作为参数，并把该key从存储中删除；
    • Storage.clear()：该方法的作用是清空存储中的所有key。
  1. 封装Storage
import { json } from 'stream/consumers'

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) {
      return JSON.parse(value)
    }
    return
  }

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

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

  key(n) {
    return this.storage.key(n)
  }

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

const localCache = new HYCache()
const sessionCache = new HYCache(false)

// ES Module导出
export { localCache, sessionCache }

2. IndexedDB

  1. 什么是IndexedDB呢？
  • 我们能看到DB这个词，就说明它其实是一种数据库（Database），通常情况下在服务器端比较常见；
  • 在实际的开发中，大量的数据都是存储在数据库的，客户端主要是请求这些数据并且展示；
  • 有时候我们可能会存储一些简单的数据到本地（浏览器中），比如token、用户名、密码、用户信息等，比较少存储大量的数据；
  • 那么如果确实有大量的数据需要存储，这个时候可以选择使用IndexedDB。
  1. IndexedDB是一种底层的API，用于在客户端存储大量的结构化数据
  • 它是一种事务型数据库系统，是一种基于JavaScript面向对象数据库，有点类似于NoSQL（非关系型数据库）；
  • IndexDB本身就是基于事务的，我们只需要指定数据库模式，打开与数据库的连接，然后检索和更新一系列事务即可。
  1. IndexedDB的连接数据库
  • 第一步：打开indexedDB的某一个数据库；
    • 通过indexedDB.open(数据库名称 [, 数据库版本] )方法；
    • 如果数据库不存在，那么会创建这个数据；
    • 如果数据库已经存在，那么会打开这个数据库。
  • 第二步：通过监听回调得到数据库连接结果；
    • 数据库的open方法会得到一个IDBOpenDBRequest类型；
    • 我们可以通过下面的三个回调来确定结果：
      • onerror：当数据库连接失败时；
      • onsuccess：当数据库连接成功时回调；
      • onupgradeneeded：当数据库的version发生变化并且高于之前版本时回调；第一次打开该数据库时回调。
        • 通常我们在这里会创建具体的存储对象：db.createObjectStore(存储对象名称, { keypath: 存储的主键 })。
    • 我们可以通过onupgradeneeded和onsuccess回调的event获取到db对象：event.target.result。
  1. IndexedDB的数据库操作
  • 我们对数据库的操作要通过事务对象来完成：
    • 第一步：通过db获取对应存储的事务 db.transaction(存储名称, 可写操作)；
    • 第二步：通过事务获取对应的存储对象 transaction.objectStore(存储名称)。
  • 接下来我们就可以进行增删改查操作了：
    • 新增数据 store.add；
    • 查询数据；
      • 方式一：store.get(key)
      • 方式二：通过 store.openCursor 拿到游标对象
        • 在request.onsuccess中获取cursor：event.target.result
        • 获取对应的key：cursor.key；
        • 获取对应的value：cursor.value；
        • 可以通过cursor.continue来继续执行。
    • 修改数据 cursor.update(value)；
    • 删除数据 cursor.delete()。
// 1、数据库连接
const dbRequest = indexedDB.open('testDB', 3)

// 2、失败调用
dbRequest.onerror = function (err) {
  console.log('打开数据库失败！！！')
}

let db = null

// 2、第一次连接或者数据库version版本升级调用
dbRequest.onupgradeneeded = function (event) {
  // 这里过去db需要创建存储对象
  db = event.target.result
  console.log('第一次连接或者数据库version版本升级！！！')
  // { keyPath: 'id' } ，指定一个对象里的一个属性：id
  db.createObjectStore('testTB', { keyPath: 'id' })
}

// 3、成功调用
dbRequest.onsuccess = function (event) {
  console.log('数据库连接成功！！！')
  // 虽然上面的第二步也可以获取db，但是仅限与第一次连接或者数据库version版本升级调用，
  // db对后面的数据库的操作还需要
  db = event.target.result
}

const btn = document.querySelectorAll('button')
for (let i = 0; i < btn.length; i++) {
  btn[i].onclick = function () {
    //  获取储存的事务，第一个参数可以是一个数组，也就是多个储存对象，这个就一个，所以不用数组
    const transaction = db.transaction('testTB', 'readwrite')
    // 获取具体操作的存储对象
    const store = transaction.objectStore('testTB')

    switch (i) {
      case 0:
        console.log('添加')
        const arr = [
          { id: 101, name: 'xxx', age: 18 },
          { id: 102, name: 'yyy', age: 28 }
        ]
        for (const item of arr) {
          const request = store.add(item)
          // 每个添加成功回调
          request.onsuccess = function () {
            console.log('添加成功')
          }
        }
        // 全部完成操作后回调
        transaction.oncomplete = function () {
          console.log('添加操作全部完成')
        }
        break

      case 1:
        console.log('查询')
        // 查询方式一
        /* const request = store.get(102)
        request.onsuccess = function (event) {
          console.log('查询成功:' + JSON.stringify(event.target.result)) //查询成功:{"id":102,"name":"yyy","age":28}
        } */

        // 查询方式二
        // 拿到游标对象
        const request = store.openCursor()
        request.onsuccess = function (event) {
          // 开始指向游标对象的第一个
          const cursor = event.target.result
          if (cursor) {
            console.log(cursor.key, cursor.value)
            /* 101 { id: 101, name: 'xxx', age: 18 }
              102 {id: 102, name: 'yyy', age: 28} */

            //   指向下一个
            cursor.continue()
          }
        }
        break

      case 2:
        console.log('修改')
        const updateRequest = store.openCursor()
        updateRequest.onsuccess = function (event) {
          // 开始指向游标对象的第一个
          const cursor = event.target.result
          if (cursor) {
            if (cursor.key === 102) {
              const obj = cursor.value
              obj.name = 'zzz'
              cursor.update(obj)
            } 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()
            } else {
              //   指向下一个
              cursor.continue()
            }
          }
        }
        break
    }
  }
}

*3. Cookie

  1. 认识Cookie

  • Cookie（复数形态Cookies），又称为“小甜饼”。类型为“小型文本文件，某些网站为了辨别用户身份而存储在用户本地终端 （Client Side）上的数据。

    • 浏览器会在特定的情况下携带上cookie来发送请求，我们可以通过cookie来获取一些信息。

  • Cookie总是保存在客户端中，按在客户端中的存储位置，Cookie可以分为内存Cookie和硬盘Cookie。

    • 内存Cookie由浏览器维护，保存在内存中，浏览器关闭时Cookie就会消失，其存在时间是短暂的；
    • 硬盘Cookie保存在硬盘中，有一个过期时间，用户手动清理或者过期时间到时，才会被清理。

  • 如果判断一个cookie是内存cookie还是硬盘cookie呢？

    • 没有设置过期时间，默认情况下cookie是内存cookie，在关闭浏览器时会自动删除；
    • 有设置过期时间，并且过期时间不为0或者负数的cookie，是硬盘cookie，需要手动或者到期时，才会删除。

  • 一般来说，浏览器和服务器在request和response的过程中，cookie存储是由服务器进行获取和设置的，保存在浏览器中。

image.png

  1. cookie常见的属性
  • cookie的生命周期：
    • 默认情况下的cookie是内存cookie，也称之为会话cookie，也就是在浏览器关闭时会自动被删除；
    • 我们可以通过设置expires或者max-age来设置过期的时间；
      • expires：设置的是Date.toUTCString()，设置格式是;expires=date-in-GMTString-format；
      • max-age：设置过期的秒钟，;max-age=max-age-in-seconds (例如一年为606024*365)。
  • cookie的作用域：（允许cookie发送给哪些URL）
    • Domain：指定哪些主机可以接受cookie
      • 如果不指定，那么默认是 origin，不包括子域名；
      • 如果指定Domain，则包含子域名。例如，如果设置 Domain=mozilla.org，则 Cookie 也包含在子域名中（如developer.mozilla.org）。
    • Path：指定主机下哪些路径可以接受cookie
      • 例如，设置 Path=/docs，则以下地址都会匹配：
        • /docs
        • /docs/Web/
        • /docs/Web/HTTP
  1. 客户端设置cookie
  • js获取全部的cookie：
console.log(document.cookie)
  • 这个cookie会在会话关闭时被删除掉:
document.cookie='name=xxx'
  • 设置cookie，同时设置过期时间（默认单位是秒钟）:
document.cookie='name=xxx;max-age=10'

注意：服务器设置的cookie，直接通过js代码是获取不到cookie的。

  1. cookie的弊端
  • 将cookie附加到每一次的http请求中，不需要时也附加；
  • 明文传输；
  • 大小限制：4kb；
  • cookie验证登陆：
    • 客户端（浏览器、iOS、Android、小程序）-> 服务器，某一些客户端要手动在请求里添加cookie；
    • cookie现在用的越来越少，现在一般用的比较多的是在服务器里生成token（不了解，这里忽略不讲）。
avatar
文章
阅读
粉丝