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

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

使用：

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);
　　　　}
　　　})

 

不同：

1. 存储大小不同：

　　cookie在不同浏览器容纳的个数不一样，30~50，存储大小不超过4k。

　　H5提出的离线存储localStorage和sessionStorage就是为解决cookie存储大小而生，可以达到5M（以上）。

2. 有效时间不同：

　　cookie可以设置一个有效时间。

　　sessionStorage是会话级别的离线存储，即关闭当前浏览器窗口就会被清理了。

　　localStorage是永久性的离线存储，除非手动清除缓存（记录在内存中的）。

3.数据与服务器之间的交互

　　cookie数据始终在同源http请求中携带着，即使服务器并不需要，也会在客户端和浏览器之间来回传递。

　　localStorage和sessionStorage是不会主动发送个服务器的。

 

注意：不同浏览器是不能共享localStorage和sessionStorage数据的；相同浏览器的不同页面之间可以共享数据（同域名同端口）；区分不同页面或标签页间也是无法共享的。（依照同源策略）

借鉴：https://www.cnblogs.com/xiujun/p/10737460.html