JavaScript的离线存储——localStorage、sessionStorage以及cookie

时间：2020-04-17 12:49:49 阅读：83 评论：0 收藏：0 [点我收藏+]

标签：base cookie color 请求 obj logs EDA 大小 eva

相同：三者都是存储数据在客户端

使用：

1. 用户初次登录时cookie、localStorage存储以及获取数据

// cookie存储
function saveCookie(cookieName,cookieValue,cookieDates){
　　var d = new Date();
　　d.setDate(d.getDate()+cookieDates);
　　document.cookie = cookieName+"="+cookieValue+";expires="+d.toGMTString();
}

//获取Cookie
function getCookieT(cookieName){
    var cookieStr = unescape(document.cookie);
    var arr = cookieStr.split("; ");
    var cookieValue = "";
    for(var i=0;i<arr.length;i++){
      var temp = arr[i].split("=");
      if(temp[0]==cookieName){
        cookieValue = temp[1];
        break;
      }
    }
    return cookieValue;
}

//清除
function clearAllCookie() {
var keys = document.cookie.match(/[^ =;]+(?=\=)/g);
    if(keys) {
        for(var i = keys.length; i--;)
        document.cookie = keys[i] + ‘=0;expires=‘ + new Date(0).toUTCString()
    }
}

// 实现
login(){
　　var url=this.baseUrl+"/api/login/login";
　　var obj={phone:this.phone,password:this.password};
　　this.$axios.post(url, qs.stringify(obj),{
　　　　headers: {‘Content-Type‘:‘application/x-www-form-urlencoded; charset=UTF-8‘}
　　}).then(res=>{
　　　　if(res.data.code==‘success‘){
　　　　　　// 存储token到cookie
　　　　　　saveCookie(‘token‘,res.data.token,1)
　　　　　　// 获取cookie的token
　　　　　　// console.log(this.$getCookie(‘token‘))

　　　　　　// 存储id到localStorage  // sessionStorage有相同的API：setItem、getItem、removeItem...
　　　　　　localStorage.setItem(‘userId‘,res.data.id);
　　　　　　// 获取localStorage的id
　　　　　　// console.log(localStorage.getItem(‘userId‘));
　　　　　　this.$router.push(‘/‘);
　　　　}else{
　　　　　　Toast(res.data.msg);
　　　　}
　　　})