缓存应用

前言

不积跬步，无以至千里；不积小流，无以成江海；很久没上来写博客了，趁着疫情在家，寻思将这些年的一些小经验记录下来。

一、什么是缓存

缓存原本是一个硬件的概念：缓存就是数据交换的缓冲区（称作Cache），当某一硬件要读取数据时，会首先从缓存中查找需要的数据，如果找到了则直接执行，找不到的话则从内存中找。由于缓存的运行速度比数据库快得多，故缓存的作用就是帮助硬件更快地运行。

二、缓存的主要作用

• 加快页面打开速度

• 减少网络带宽消耗

• 降低服务器压力

三、缓存类型

在一个web应用中，缓存大体可分为三类：网络中的缓存、服务端缓存、客户端缓存；

1、网络中的缓存

网络中的缓存位于客户端和服务端之间，代理或响应客户端的网络请求，从而对重复的请求返回缓存中的数据资源更新缓存中的内容。最常见的就是CDN，例如将图片、js、css、html等静态文件放入cdn节点中。

2、服务端缓存

服务端缓存包括：数据库缓存、中间件缓存；在数据库查询时，select会将查询结果放入缓冲区，后面再次查询时，会直接从缓冲区读取。中间件缓存主要包括redis、mongoDB、Memcached。

3、客户端缓存

客户端缓存包括：cookie(4kb左右)、localstorage(本地存储永久存储，5M左右，不同浏览器不一样)、sessionstorage(会话期间存储)、indexeddb(浏览器数据库存储)

四、客户端缓存区别

五、代码示例

1. Cookie代码

/* https://themetest.xueanquan.com/index.html?id=1 */
document.cookie="username=mengtao";
document.cookie="gender=male";
//Domain 标识指定了哪些域名可以接受Cookie。如果没有设置domain，就会自动绑定到执行语句的当前域
document.cookie='age=20;domain=.xueanquan.com';
//设置过期时间
var now=new Date();now.setMinutes(now.getMinutes()+20);
document.cookie="username=mengtao;expires="+now.toGMTString();

//删除cookie，本质上是设置cookie过期
var now=new Date();now.setDate(-1);
document.cookie="username=mengtao;expires="+now.toGMTString();

IndexedDB 是一种低级API，用于客户端存储大量结构化数据(包括文件和blobs)。该API使用索引来实现对该数据的高性能搜索。IndexedDB 是一个运行在浏览器上的非关系型数据库。既然是数据库了，那就不是 5M、10M 这样小打小闹级别了。理论上来说，IndexedDB 是没有存储上限的（一般来说不会小于 250M）。它不仅可以存储字符串，还可以存储二进制数据

Cookie 的本职工作并非本地存储，而是“维持状态”。HTTP协议是无状态的，HTTP协议自身不对请求和响应之间的通信状态进行保存，cookie就是用来维持状态http的状态

1. localStorage代码

   /* localStorage */
   window.localStorage.setItem("mttest","这是一条测试数据");
   window.localStorage.getItem("mttest");
   window.localStorage.removeItem("mttest");
   window.localStorage.clear();
   
   var data={name:"张三",age:24,sex:'男'};
   window.localStorage.setItem("userinfo",JSON.stringify(data));
   var jsonStr=window.localStorage.getItem("userinfo");
   console.log(JSON.parse(jsonStr));
   
   
   

    

2. sessionStorage代码

   /* sessionStorage */
   window.sessionStorage.setItem("mttest","这是一条测试数据");
   window.sessionStorage.getItem("mttest");
   window.sessionStorage.removeItem("mttest");
   window.sessionStorage.clear();
   
   var data={name:"张三",age:24,sex:'男'};
   window.sessionStorage.setItem("userinfo",JSON.stringify(data));
   var jsonStr=window.sessionStorage.getItem("userinfo");
   console.log(JSON.parse(jsonStr));
   
   

3. IndexedDB

   
   
   var databaseName = 'themetest';//数据库的名字
   var version = 1;//数据库版本号
   var db;//数据库对象
   //打开数据库，如果不存在，则创建新数据库
   var request = window.indexedDB.open(databaseName, version);
   
   request.onerror = function (e) {
    console.log('数据库打开失败:',e);
   };
   
   request.onsuccess = function (e) {
    db=request.result;
    console.log('数据库打开成功');
   }
   
   

   六、总结

4. Cookie 的本职工作并非本地存储，而是“维持状态”

5. Web Storage 是 HTML5 专门为浏览器存储而提供的数据存储机制，不与服务端发生通信

6. IndexedDB 用于客户端存储大量结构化数据