一：方式

本地缓存的方法我们主要讲述以下五种:

1.1.cookie

Cookie ，类型为「小型文本文件」，指某些网站为了辨别用户身份而储存在用户本地终端上的数据，不受前端掌控，由后端控制。是为了解决 HTTP 无状态导致的问题，作为一段一般不超过 4KB 的小型文本数据，它由一个名称(Name)、一个值(Value)和其它几个用于控制 cookie 有效期、安全性、使用范围的可选属性组成。

但是 Cookie 在每次请求中都会被发送，如果不使用 HTTPS 并对其加密，其保存的信息很容易被窃取，导致安全风险。

举个例子，在一些使用 cookie 保持登录态的网站上，如果 cookie 被窃取他人很容易利用你的 cookie 来假扮成你登录网站关于 cookie 常用的属性如下:

Expires=Wed，21 Oct 2015 07:28:00 GMT

Max-Age=604800

Path=/docs  #/docs/Web/下的资源会带Cookie 首部

标记为 Secure 的 Cookie 只应通过被 HTTPS 协议加密过的请求发送给服务端

通过上述，我们可以看到 cookie 又开始的作用并不是为了缓存而设计出来，只是借用了 cookie 的特性实现缓存

关于 cookie 的使用如下:

document.cookie='名字=值';

关于 cookie 的修改，首先要确定 domain 和 path 属性都是相同的才可以，其中有一个不同得时候都会创建出一个新的 cookie

Set-Cookie:name=aa;domain=aa.net;path=/#服务端设置
document.cookie =name=bb;domain=aa.net;path=/ #客户端设置

最后 cookie 的删除，最常用的方法就是给 cookie 设置一个过期的事件，这样 cookie 过期后会被浏览器删除

1.2.localStorage

下面再看看关于 localStorage 的使用:

设置

localStorage.setItem('username','midsummer');
//存对象
const user = {
    name: 'midsummer',
    age: 18
}
localStorage.setItem('userInfo',JSON.stringify(user));

获取

localStorage.getItem('username')
//获取对象
console.log(JSON.parse(localStorage.getItem('userInfo')));

获取键名

localstorage.key(0)//获取第一个键名

删除

localStorage.removeItem('username')

一次性清除所有存储

localStorage.clear()

localStorage 也不是完美的，它有两个缺点:

localStorage.setItem('key'{name:'value'});
console.log(localStorage.getItem('key'));//'[object, 0bject]

1.3.sessionStorage

sessionStorage 和 localstorage 使用方法基本一致，唯一不同的是生命周期，一旦页面(会话)关闭，sessionStorage 将会删除数据

1.4.Web SQL

具体使用如下：

  <button onclick="openDB()">打开数据库button>
  <script>
    let db = null
    function openDB() {
      db = openDatabase('juejin_courses', '1.0', 'Juejin Course Database', 2 * 1024 * 1024)
      db && alert(`数据库 juejin_courses 打开了`)
    }
  script>

1.5.IndexedDB

indexedDB 是一种低级API，用于客户端存储大量结构化数据(包括,文件/blobs)。该API使用索引来实现对该数据的高性能搜索, 虽然 web Storage 对于存储较少量的数据很有用，但对于存储更大量的结构化数据来说，这种方法不太有用。 IndexedDB 提供了一个解决方案

优点:

缺点:

关于 indexedDB 的使用基本使用步骤如下:

打开数据库并且开始一个事务创建一个 object store构建一个请求来执行一些数据库操作，像增加或提取数据等通过监听正确类型的 DOM 事件以等待操作完成。在操作结果上进行一些操作(可以在request对象中找到)

关于使用 indexdb 的使用会比较繁琐，大家可以通过使用 Godb.js 库进行缓存，最大化的降低操作难度

使用示例：

  <button onclick="openDB()">连接数据库button>
  <button onclick="createDB()">新建数据库button>
  <button onclick="insertOneDB()">插入一条数据button>
  <button onclick="insertMultiDB()">插入多条数据button>
  <button onclick="queryDB()">查询数据button>
  <button onclick="updateDB()">更新数据button>
  <div id="table">div>
  <script>
    const dbName = 'users'
    const dbVersion = 1.0
    let db = null
    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) {
        db = event.target.result
        console.log(`数据库${db.name}已经开启`);
      }
    }
  
    function insertOneDB() {
      console.log(db);
      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('数据写入成功');
      }
    }
  
    function insertMultiDB() {
      const data = [
        {id: 2, title: '男生1', author: '李四', createAt: Date.now()},
        {id: 3, title: '男生2', author: '王二', createAt: Date.now()},
        {id: 4, title: '女生', 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()
      }
    }
  
    function queryDB() {
      const transaction = db.transaction(['sex'], 'readonly')
      const objectStore = transaction.objectStore('sex')
      const index = objectStore.index('title')
      const range = IDBKeyRange.only('女生')
      const request = index.openCursor(range)
      request.onsuccess = function(event) {
        console.log(event.target.result.value);
      }
      // const req = objectStore.get(1)
      // req.onerror = function() {
      //   console.log('查找失败');
      // }
      // req.onsuccess = function() {
      //   console.log(req.result);
      // }
      // 拿到某些数据
    }
  script>

二：区别

关于 cookie、sessionStorage、localStorage 三者的区别主要如下:

存储大小:

有效时间:

数据与服务器之间的交互方式：

三：应用场景

在了解了上述的前端的缓存方式后，我们可以看看针对不同场景的使用选择: