纯前端有哪些方法可以实现缓存

纯前端如何做缓存，下面web建站小编给大家简单介绍一下三种不同的方法，它们分别是cookie、localStorage和sesstionStorage。

1、利用cookie方法实现缓存

复制代码//设置缓存
function setCookie(cname,cvalue,exdays){
  var d = new Date();
  d.setTime(d.getTime()+(exdays*24*60*60*1000)); 
  // 得到GMT时间
  var expires = "expires="+d.toGMTString();
  document.cookie = cname+"="+cvalue+"; "+expires;
}

//获取缓存
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!=""){
    console.log(111)
  }
  else {
    if (user!="" && user!=null){
        setCookie("username",user,30);
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

2、利用localStorage方法实现缓存

复制代码localStorage.setItem(key, value) //添加缓存
localStorage.getItem(key) //获取缓存
localStorage.removeItem(key) 删除缓存
localStorage.clear() //清空所有缓存
localStorage.length //获取缓存长度
1
2
3
4
5

3、利用sesstionStorage方法实现缓存

复制代码sessionStorage.setItem(key, value) //添加缓存
sessionStorage.getItem(key) //获取缓存
sessionStorage.removeItem(key) 删除缓存
sessionStorage.clear() //清空所有缓存
1
2
3
4