前言

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

一、什么是缓存

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

二、缓存的主要作用

加快页面打开速度
减少网络带宽消耗
降低服务器压力

三、缓存类型

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

1、网络中的缓存

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

2、服务端缓存

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

3、客户端缓存

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

四、客户端缓存区别

特性	cookie	localStorage	sessionStorage	indexedDB
存储大小	4kb左右	5MB左右，不同浏览器不一样（2.5到10，具体大小可以去试试）	5MB左右，不同浏览器不一样	不少于250M（无限）
存储位置	浏览器	浏览器	浏览器	浏览器
存储类型	字符串	字符串	字符串	字符串、二进制数据(ArrayBuffer 对象和 Blob 对象)
生命周期	一般由服务器生成，可以设置过期时间或者手动删除	除非手动清理，否则一直存在	页面关闭就清理	除非手动清理，否则一直存在
访问权限	浏览器全局共享，域名隔离；同一个主机名	同一个协议、主机名、端口	同一个协议、主机名、端口、页面窗口	网页只能访问自身域名下的数据库，域名隔离
是否参与Http通讯	每次都会携带在header中，对应请求影响性能	不参与	不参与	不参与
使用场景	登录信息、设置信息（网站语言），服务端生成cookie值，写入到浏览器，后续接口请求自动带上cookie，供服务端使用	前端缓存数据使用，例如编辑器草稿箱，定时去保存，页面关闭后再次打开自动读取缓存数据。主要在客户端使用	页面开场动画，例如话题每次进来时的全屏动画，表单提交数据维护，也可以采用sessionstorage；访问足迹也适用，用来记录上次访问页面	base64图片数据保存，实例：淘宝网站
优点	能够与服务端交互	相对cookie存储空间更大在浏览器中发送请求不会带上web storage里面的数据更加友好的api 可以做永久存储(localstorage)		可以存储大量数据；在线离线都可以使用；

五、代码示例

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的状态

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));

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));

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('数据库打开成功');
}

六、总结

Cookie 的本职工作并非本地存储，而是“维持状态”
Web Storage 是 HTML5 专门为浏览器存储而提供的数据存储机制，不与服务端发生通信
IndexedDB 用于客户端存储大量结构化数据

mt122

发布了20 篇原创文章 · 获赞 5 · 访问量 4万+

私信关注

缓存应用

前言