数据存储笔记

最新推荐文章于 2023-01-05 19:35:49 发布

派大星965

最新推荐文章于 2023-01-05 19:35:49 发布

阅读量1k

点赞数

分类专栏： js笔记文章标签：前端

本文链接：https://blog.csdn.net/weixin_55679970/article/details/122668989

版权

js笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

认识Storage

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

localStorage:本地存储，提供的是一种永久性的存储方法，在关闭掉网页重新打开时，存储的内容依然保留;

sessionStorage: 会话存储，提供的是本次会话的存储，在关闭掉会话时，存储的内容会被清除;

localStorage和sessionStorage的区别

关闭网页后重新打开，localStorage会保留，而sessionStorage会被删除;

在页面内实现跳转，localStorage会保留，sessionStorage也会保留﹔

在页面外实现跳转（打开新的网页），localStorage会保留，sessionStorage不会被保留;

Storage常见的属性和方法

// localStorage和sessionStorage都有这些方法

// 1. setItem 存
localStorage.setItem('name', 'coder')
localStorage.setItem('age', 18)

// 2. length 
console.log(localStorage.length);

// 3. key方法
console.log(localStorage.key(0));

// 4. getItem
console.log(localStorage.getItem('age'));

// 5. removeItem 移除某一个
console.log(localStorage.removeItem('age'));

// 6. clear 清空所有
console.log(localStorage.clear());

封装一个工具类函数

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

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

  getItem(key) {
    const value = this.storage.getItem(key)
    if(value) {
      return JSON.parse(value)
    }
  }

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

  clear() {
    this.clear()
  }

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

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

export {
  localCache,
  sessionCache
}

indexedDB数据库的使用

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

它是一种事务型数据库系统，是一种基于JavaScript面向对象数据库，有点类似于NoSQL(非关系型数据库）;

IndexDB本身就是基于事务的，我们只需要指定数据库模式，打开与数据库的连接，然后检索和更新一系列事务即可;

<!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>
    <button>新增</button>
    <button>查询</button>
    <button>修改</button>
    <button>删除</button>
    <script src="./04_indexedDB数据库的使用.js"></script>
  </body>
</html>

// 打开数据(和数据库建立连接)
const dbRequest = indexedDB.open('coder') // 有coder数据库就会打开这个，没有就会创建
// 连接失败的回调
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

  // 创建一些存储对象
  db.createObjectStore('users', { keyPath: 'id' }) 
  db.createObjectStore('ages', { keyPath: 'id' })
}

class User {
  constructor(id, name, age) {
    this.id = id,
      this.name = name
    this.age = age
  }
}

const users = [
  new User(100, 'coder', 19),
  new User(101, 'kobe', 19),
  new User(102, 'james', 19)
]

// 获取btns 监听点击
const btns = document.querySelectorAll('button')

for (let i = 0; i < btns.length; i++) {
  btns[i].onclick = function () {
    const transaction = db.transaction(['users', 'ages'], 'readwrite')
    const store = transaction.objectStore('users')
    switch (i) {
      case 0:
        console.log('点击了新增');
        users.forEach(item => {
          const request = store.add(item)
          request.onsuccess = function () {
            console.log(`${item.name}插入成功`);
          }
        })

        transaction.oncomplete = function () {
          console.log('添加操作全部完成');
        }
        break
      case 1:
        console.log('点击了查询');
        // 1.查询方式一（知道主键，根据主键查询）
        // const request = store.get(102)
        // request.onsuccess = function(event) {
        //   console.log(event.target.result);
        // }

        // 2.查询方式二
        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() // 继续查询
            }
          }else {
            console.log('查询完成');
          }
        }
        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() // 继续查询
            }
          }else {
            console.log('查询完成');
          }
        }
        break
    }
  }
}

cookie

Cookie (复数形态Cookies)，又称为“小甜饼”。类型为“小型文本文件，某些网站为了辨别用户身份而存储在用户本地终端( Client Side )上的数据。浏览器会在特定的情况下携带上

cookie来发送请求，我们可以通过cookie来获取一些信息;

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

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

cookie的生命周期

默认情况下的cookie是内存cookie，也称之为会话cookie，也就是在浏览器关闭时会自动被删除

我们可以通过设置expires或者max-age来设置过期的时间;

expires :设置的是Date.toUTCString0，设置格式是;expires=date-in-GMTString-format

max-age :设置过期的秒钟，;max-age=max-age-in-seconds(例如一年为60*60*24*365)

cookie的作用域∶（允许cookie发送给哪些URL )

Domain :指定哪些主机可以接受cookie

如果不指定，那么默认是 origin，不包括子域名。

如果指定Domain，则包含子域名。例如，如果设置Domain=mozilla.org.，则Cookie 也包含在子域名中(如developer)

Path:指定主机下哪些路径可以接受cookie

例如，设置Path=/docs，则以下地址都会匹配∶

/docs

/docs/Web/

/docs/Web/HTTP

cookie的基本使用

// js直接设置和获取cookie

console.log(document.cookie);

// cookie会在会话关闭时被删除掉
// 设置过期时间就是本地cookie,不设置就是内存cookie
document.cookie = 'name=coder'
document.cookie = 'age=19'

// 设置cookie,同时设置过期时间(默认单位是秒钟)
document.cookie = 'name=coder;max-age=10'

// 缺点
// 1. 将cookie附加到每一次的http请求中。
// 2. 明文传输的 headers、
// 3. cookie验证登录