H5中缓存机制

webstorage机制

一、localStorage

用于永久性的进行本地缓存，不会自动清除、没有过期时间，直至手动清除数据。

存储方式

● 以键值对的形式进行存储 ， 存储的方式只能是String类型。获取的数据也只能是String类型

window.localStorage.setItem('isDevice','false')；
const isDevice = window.localStorage.getItem('isDevice');
if(isDevice){
    console.log("welcome to device");
}else{
    console.log('error');
}
//运行结果
weicome to device
//false只是表示String类型，不能表示boolean类型

常用API

//存储数据
window.localStorage.setItem('isDevice','false');
//获取数据
window.localStorage.getItem('isDevice');
//删除数据
window.localStorage。removeItem（'isDevice'）;
//清空数据
window.localStorage.clear();
//获取键值对
window.localStorage.key(n);

说明：通过getItem获取到的数据都是String类型，需要根据业务需求将数据转换为不同的数据类型。

二、sessionStorage

用于本地存储会话数据

存储范围

● 在同一个会话的页面可以访问
● 不同的浏览器之间不能进行访问
● 同源窗口不能进行访问
● 会话结束、窗口关闭后缓存失效

存储方式

键值对方式存储，存储类型为String类型

常用API

同localStorage

---

cookie机制

cookie与webStorage的区别

● 数据存储
cookie的数据始终在http的同源请求中存储，数据可以在客户端与服务器端进行回传。webStorage的数据只能进行本地存储，不能向服务器进行传递。
● 生命周期
sessionStorage是会话级别的缓存，在当次会话结束后缓存数据被清除。
localStorage是永久缓存，直到被手动清除
cookie可以设置声明周期，到该时间失效
● 存储的数据量
每次http的请求都会携带cookie，所以cookie的大小存在限制。cookie存储数据的大小要求不能超过4k
webStorage数据因为只在本地进行缓存，对数据存储量的可以达到4-5M
● 作用域
sessionStorage的作用在同一次会话之间，不在不同浏览器及同源之间进行共享。
localStorage作用在同源浏览器之间
cookie的作用域也是在同源浏览器之间

cookie常用方法

//存储cookie
document.cookie = 'userName = Yun '
document.cookie = 'userNmae = Yun ; expires = Thu, 18 Dec 2043 12:00:00 GMT;'
//读取cookie
const userName = document.cookie;
//修改cookie
document.cookie = 'userName = Zhiyao'
//删除cookie , 即时间设置为过去的时间即可
document.cookie = 'userName = ;expires = Thu, 18 Dec 2043 12:00:00 GMT;'

说明：在存储cookie的时候虽然存储的是string类型，但是获取到的时候都是以=键值对的形式获取到的数据。在进行获取数据的时候要对数据进行截取。

使用示例

function setCookie(cname , name , time) {
   let now = new Date();
   now.getTime(now.getTime()+(time*24*60*60));
   let expires = 'expires = '+ now.toGMTString();
   let username = cname+'='+name;
   document.cookie=username;
}

function getCookie(key) {
   let cookieArr = document.cookie.split(';');
   let name = key+'=';
   for (var k in cookieArr){
     if (cookieArr[k].trim().indexOf(name) === 0 ){
       return   cookieArr[k].trim().substring(name.length,cookieArr[k].trim().length)
     }
   }
   return "";
}

function checkCookie(){
  let name = getCookie('name');
  if (name !== ''){
      alert("欢迎"+name+"再次光临");
  }else {
    setCookie("name",'song',30);
  }
}

---

webStorage与cookie的对比

1、webstorage 只存储在客户端本地，不占用带宽
2、webStorage 可以减少不必要的一些请求
3、webstorage只能保存在本地，不能与服务器进行交互
4、webstorage只能手动清除或者临时存储，不能自动清除

参考链接：
h5的缓存机制
JavaScript设置cookie | 菜鸟教程

来自为知笔记(Wiz)