码迷,mamicode.com
首页 > 编程语言 > 详细

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

 

不同:

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

 

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

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

原文地址:https://www.cnblogs.com/xiong88/p/12719007.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!