设置缓存》

localStorage

1.作用范围：在所有同源窗口中都是共享的。

2.存储的大小：限制是每个域名5M总容量左右

3.有效期：一直有效，即使窗口或浏览器关闭，除非手动清除；

localStorage基本使用：

//1.存储数据---复杂数据的格式必须是字符串；
localStorage.setItem(key,JSON.stringify(value))
//2.获取数据---由于复杂数据是字符串需要转后使用；
localStorage.getItem(key)
//3.清除单个数据；
localStorage.removeItem(key)
//4.清除所有数据；
localStorage.clear(key)

sessionStorage

1.作用范围：在所有同源窗口中都是共享的。

2.存储的大小：限制是每个域名5M总容量左右

3.有效期：一直有效，即使窗口或浏览器关闭，除非手动清除；

sessionStorage基本使用：

//1.存储数据---复杂数据的格式必须是字符串；
sessionStorage.setItem(key,JSON.stringify(value))
//2.获取数据---由于复杂数据是字符串需要转后使用；
sessionStorage.getItem(key)
//3.清除单个数据；
sessionStorage.removeItem(key)
//4.清除所有数据；
sessionStorage.clear(key)

Cookie

Cookie全程 HTTP Cookie ，简称 Cookie。它是浏览器存储数据的一种方式，一般会自动随着请求发送到服务器；

1.作用范围：cookie也是在所有同源窗口中都是共享的。

2.存储的大小：只有4K左右

3.有效期：cookie只在设置的cookie过期之前一直有效，即使窗口或浏览器关闭

Cookie基本使用：

//1、存cookie  set方法支持的属性有 ：  expires->过期时间    path->设置为指定页面创建cookie   domain-》设置对指定域名及指定域名的子域名可见  secure->值有false和true ,表示设置是否只支持https,默认是false
Cookies.set('key', 'value');  //创建简单的cookie
Cookies.set('key', 'value', { expires: 27 });//创建有效期为27天的cookie
Cookies.set('key', 'value', { expires: 17, path: ''  }); //可以通过配置path,为当前页创建有效期7天的cookie
 
//2、取cookie
Cookies.get('key'); // 获取指定key 对应的value
Cookies.get(); //获取所有value
 
//3、删除cookie
Cookies.remove('key');//删除普通的cookie
Cookies.remove('name', { path: '' }); // 删除存了指定页面path的cookie

注意：如果存的是对象，如： userInfo = {age:111,score:90};  Cookie.set('userInfo',userInfo)
 
取出来的userInfo需要进行JSON的解析,解析为对象：let res = JSON.parse( Cookie.get('userInfo') );
 
当然你也可以使用：Cookie.getJSON('userInfo');