前端发送请求主要经历一下三个过程： 请求、处理、响应。
如果短时间内重复发送这个请求，每次都会执行这三个过程，影响用户体验和给服务器造成压力，这时候可以选择的解决方案有很多种。从服务端的角度，走cdn、优化接口等。本文重点从前端的角度来描述。
浏览器缓存
当浏览器请求一个网站的时候，会加载各种各样的资源，比如：HTML文档、图片、CSS和JS等文件。对于一些不经常变的内容，浏览器会将他们保存在本地的文件中，下次访问相同网站的时候，直接加载这些资源，加速访问。还有一种方式，手动将这个不变的文件（css、js等）放到cookie、localStorage、sessionStorage等（如果是会变动的css、js等，可以通过加版本，通过一个接口返回本次需要更新缓存队列的请求资源，并从新更新）
优点：
1、减少页面加载时间
2、减少服务器负载
cookie
Cookie 是一些数据, 存储于你电脑上的文本文件中。
当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。
Cookie 的作用就是用于解决 "如何记录客户端的用户信息":
当用户访问 web 页面时，他的名字可以记录在 cookie 中。 在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。 Cookie 以名/值对形式存储，如下所示:
username=John Doe
当浏览器从服务器上请求 web 页面时， 属于该页面的 cookie 会被添加到该请求中。服务端通过这种方式来获取用户的信息。
对cookie的封装
// 设置cookie
/*
cname：key,// 键名
cvalue: value,// 键值
exdays: // 过期时间（天）
*/
function setCookie(cname,cvalue,exdays){
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires;
}
/*
cname: //键名
*/
function getCookie(cname){
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i < ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
}
return "";
}
function checkCookie(){
var user=getCookie("username");
if (user!=""){
alert("欢迎 " + user + " 再次访问");
}
else {
user = prompt("请输入你的名字:","");
if (user!="" && user!=null){
setCookie("username",user,30);
}
}
}
cookie的缺点
（1）cookie可能被禁用。当用户非常注重个人隐私保护时，他很可能禁用浏览器的cookie功能；
（2）cookie是与浏览器相关的。这意味着即使访问的是同一个页面，不同浏览器之间所保存的cookie也是不能互相访问的
（3）cookie可能被删除。因为每个cookie都是硬盘上的一个文件，因此很有可能被用户删除
（4）cookie安全性不够高。所有的cookie都是以纯文本的形式记录于文件中，因此如果要保存用户名密码等信息时，最好事先经过加密处理。
（5）存储大小限制、存储空间4-10KB左右
localStorage
在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。
优点
1、localStorage拓展了cookie的4K限制
2、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的
缺点
1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性
2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换
3、localStorage在浏览器的隐私模式下面是不可读取的
4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
5、localStorage不能被爬虫抓取到localStorage
6、sessionStorage的唯一一点区别就是localStorage属于永久性存储
使用
首先在使用localStorage的时候，我们需要判断浏览器是否支持localStorage这个属性
if(！window.localStorage){
alert("浏览器支持localstorage");
return false;
}else{
//主逻辑业务
}localStorage的写入，localStorage的写入有三种方法，这里就一一介绍一下
if(！window.localStorage){
alert("浏览器支持localstorage");
return false;
}else{
var storage=window.localStorage;
//写入a字段
storage["a"]=1;
//写入b字段
storage.a=1;
//写入c字段
storage.setItem("c",3);
console.log(typeof storage["a"]);
console.log(typeof storage["b"]);
console.log(typeof storage["c"]);
}这里要特别说明一下localStorage的使用也是遵循同源策略的，所以不同的网站直接是不能共用相同的localStorage
localStorage的删除
1、键值对删除
/*
key: 键名
*/
storage.removeItem(key);
2、将localStorage的所有内容清除
var storage=window.localStorage;
console.log(storage);
storage.clear();
console.log(storage);
获取键值
var storage=window.localStorage;
console.log(storage);
storage.getItem(key);
console.log(storage);
**获取键名
var storage=window.localStorage;
for(var i=0;i < storage.length;i++){
var key=storage.key(i);
console.log(key);
}
localStorage其他注意事项
一般我们会将JSON存入localStorage中，但是在localStorage会自动将localStorage转换成为字符串形式
这个时候我们可以使用JSON.stringify()这个方法，来将JSON转换成为JSON字符串
sessionStorage
localStorage和sessionStorage一样都是用来存储客户端临时信息的对象,使用方式也差不多，唯一的区别就是，localStorage永久保存，只要用户不清除不禁言，永久存在，sessionStorage只存在本次会话中，窗口关闭，就不存在
