cookies与storage的区别

1. 存储空间的区别

cookies的数据大小不超过4KB

storage因为子域存储空间独立，存储大小更大，可以达到5MB

2. 与服务器之间的交互

cookies首次从服务器发送到客户端后，当页面每一次访问都会cookies伴随着url一同发送到服务器

storage不会把数据发给服务器，只存在本地

3. API区别

cookies需要自己封装，毕竟这个4KB大小也不能要求还提供什么接口

storage提供比较丰富的接口，使用较为方便

如何在Vue中设置cookies和storage

设置cookies

Vue.prototype.Setcookie = function (name,value) {
  //设置名称为name,值为value的Cookie
  var expdate = new Date();   //初始化时间
  expdate.setTime(expdate.getTime() + 30 * 60 * 1000);   //时间单位毫秒
  document.cookie = name + "=" + escape(value) + ";expires=" + expdate.toGMTString() + ";path=/";
  //即document.cookie= name+"="+value+";path=/";  时间默认为当前会话可以不要，但路径要填写，因为JS的默认路径是当前页，如果不填，此cookie只在当前页面生效！
}

获取cookies

Vue.prototype.getcookie = function (a){
  // console.log(a)
  var d;
  var b = document.cookie;
  // console.log(b)
  var c = b.split(";");
  for (let e = 0; e < c.length; e++) {
    var f = c[e].split("=");
    if (a == f[0].toString().trim()) {
      d = f[1];
      break;
    }
  } if (void 0 == d || null == d) {
    return "";
  }
  else {
    var g = unescape(d.trim());
    return g;
  }
}

删除cookies

Vue.prototype.delCookie= function (a){
  var b = new Date(0).toGMTString();
  document.cookie = a + "=;expires=" + b + ";path=/";
}

storage分为localStorage和sessionStorage,两者用法基本相同,sessionStorage为页面关闭后清除缓存

设置localStorage

export function setLocalStorage(name,text) {
    // name为缓存的key值,text为缓存的value值,如果存入的值为对象,可以使用JSON.stringify(text),换成对象存入缓存
    localStorage.setItem(`${name}`, text)
}

获取localStorage

export function getLocalStorage(name) {
    // 获取name代表的缓存的key值
    let name = localStorage.getItem(`${name}`)
    return name
}

移除localStorage

export function removeLocalStorage(name) {
    localStorage.removeItem(`${name}`)
}

设置sessionStorage

export function setSessionStorage (name, text) {
    sessionStorage.setItem(`${name}`, text)
}

获取sessionStorage

export function getSessionStorage (name) {
    let name = sessionStorage.getItem(`${name}`)
    return name
}

移除sessionStorage

export function removeSessionStorage (name) {
    sessionStorage.removeItem(`${name}`)
}