一篇打通浏览器储存

一：方式

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

cookie
sessionStorage
localStorage
Web SQL
indexedDB

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

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

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

Expires 用于设置 cookie 的过期时间

js 复制代码

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

Max-Age 用于设置在 Cookie 失效之前需要经过的秒数(优先级比 Expires 高)

js 复制代码

Max-Age=604800

Domain 指定了 Cookie 可以送达的主机名
Path 指定了一个 URL 路径，这个路径必须出现在要请求的资源的路径中才可以发送 Cookie 首部

js 复制代码

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

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

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

关于 cookie 的使用如下:

js 复制代码

document.cookie='名字=值';

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

js 复制代码

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

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

1.2.`localStorage`

HTML5 新方法，IE8及以上浏览器都兼容
生命周期：持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的
是为每一个域名开辟的存储空间，存储的信息在同一域中是共享的
当本页操作(新增、修改、删除)了 localstorage 的时候，本页面不会触发 storage 事件,但是别的页面会触发 storage 事件。
大小:5M(跟浏览器厂商有关系)
localStorage 本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变大
受同源策略的限制

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

设置

js 复制代码

localStorage.setItem('username','midsummer');

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

获取

js 复制代码

localStorage.getItem('username')

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

获取键名

js 复制代码

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

删除

js 复制代码

localStorage.removeItem('username')

一次性清除所有存储

js 复制代码

localStorage.clear()

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

无法像Cookie一样样设置过期时间
只能存入字符串，无法直接存对象

js 复制代码

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

1.3.`sessionStorage`

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

1.4.Web SQL

浏览器上的模拟数据库（已弃用）

具体使用如下：

js 复制代码

<body>
  <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>
</body>

1.5.IndexedDB

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

优点:

浏览器提供的本地数据库
储存量理论上没有上限
所有操作都是异步的，相比 LocalStorage 同步操作性能更高，尤其是数据量较大时
支持使用js编写逻辑来创建，打开，插入，查询，删除 IndexedDB 中的数据
键值对存储
永久存储

缺点:

操作非常繁琐
本身有一定门槛

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

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

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

使用示例：

js 复制代码

<body>
  <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>
</body>

二：区别

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

存储大小:

cookie 数据大小不能超过4k
sessionStorage 和 localstorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大

有效时间:

localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
sessionStorage 数据在当前浏览器窗口关闭后自动删除
cookie 设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭

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

cookie 的数据会自动的传递到服务器，服务器端也可以写 cookie 到客户端;
sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存

三：应用场景

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

标记用户与跟踪用户行为的情况，推荐使用 cookie
适合长期保存在本地的数据(令牌)，推荐使用 localstorage
敏感账号一次性登录，推荐使用 sessionStorage
存储大量数据的情况、在线文档(富文本编辑器)保存编辑历史的情况，推荐使用 indexedDB

一篇打通浏览器储存

一：方式

1.1.cookie

1.2.localStorage

1.3.sessionStorage

1.4.Web SQL

1.5.IndexedDB

二：区别

三：应用场景

1.2.`localStorage`

1.3.`sessionStorage`