快捷導(dǎo)航

Javascript 對(duì)cookie操作詳解及實(shí)例

更新時(shí)間：2016年12月29日 10:05:07 投稿：lqh

這篇文章主要介紹了Javascript 對(duì)cookie操作詳解及實(shí)例的相關(guān)資料,大家在開發(fā)網(wǎng)站的時(shí)候，都會(huì)用到cookie 這里就詳細(xì)介紹下，需要的朋友可以參考下

js 操作 cookie 的方法

cookie

cookie，有時(shí)候也用其復(fù)數(shù)形式Cookies，指某些網(wǎng)站為了辨別用戶身份，進(jìn)行session跟蹤而儲(chǔ)存在用戶本地終端上的數(shù)據(jù)（經(jīng)常通過加密）。定義于RFC2109和2965都已廢棄，最新取代的規(guī)范是RFC6265。

cookie的作用

服務(wù)器可以利用Cookie包含信息的任意性來篩選經(jīng)常性維護(hù)這些信息，以判斷在HTTP傳輸中的狀態(tài)。Cookie最典型的英語是判斷注冊(cè)用戶是否已經(jīng)登錄網(wǎng)站，用戶可能會(huì)得到提示，是否在下一次進(jìn)入此網(wǎng)站時(shí)保留用戶信息以便簡(jiǎn)化登錄步驟，浙西都是Cookie的功能。另一個(gè)重要張合是“購物車”之類處理。用戶可能會(huì)在一段時(shí)間內(nèi)在同一家網(wǎng)站的不同頁面中選擇不同的商品，這些信息都會(huì)寫入Cookie，以便在最后付款時(shí)提取信息。

js設(shè)置cookie

document.cookie="key=value";
//例
document.cookie="name=weiqi";

//可以在控制臺(tái)中打印出cookie
console.log(document.cookie);

如何修改和獲取cookie

js中并沒有提供獲取cookie的方法，所以只能自己封裝方法，相同的key的cookie只能存在一個(gè)，如果定義了一個(gè)document.cookie="age=21",后面又定義了document.cookie="age=30"，那么后面定義的cookie會(huì)覆蓋前面定義的cookie，所以修改cookie值的時(shí)候只用重新定義個(gè)key相同的cookie就可以了。那么獲取cookie的時(shí)候也只用在cookie中獲取到這個(gè)key后面的“=”和“；”直接的字符串，那就是這個(gè)cookie的值了，獲取的方法又很多種，這里我寫一種比較簡(jiǎn)單的：

function getCookie(key){
  var index = document.cookie.indexOf(key);
  var returnValue;
  if(index!==-1){
    var tIndex = document.cookie.indexOf(";",index);
    var target = document.cookie.substring(index,tIndex);
    var returnValue = decodeURIComponent(target.replace(key+"=",""))
  }
  return returnValue;
}

document.cookie="name=weiqi";
getCookie("name"); //weiqi

刪除cookie

cookie是有有效期的，前面我們?cè)O(shè)置cookie的時(shí)候都沒有設(shè)置有效期，如果我們將cookie的有效期設(shè)置成一個(gè)已經(jīng)過去的時(shí)間，那么它就無效了，下面來實(shí)現(xiàn)一下：

function delCookie(key){
  var d = new Date();
  document.cookie=key+"=;expires="+ d.toGMTString();
}

document.cookie="name=weiqi";
delCookie("name"); //undefined

給cookie設(shè)置一個(gè)有效期

通過expires給cookie設(shè)置一個(gè)有效期，現(xiàn)在我們?cè)O(shè)置一個(gè)cookie的有效期是10天，如下：

var d = new Date();
var time = 10;
d.setTime(d.getTime()+time*1000*60*60*24);
document.cookie="name=weiqi;expires="+ d.toGMTString();

封裝cookie

將自定義的一些方法完善一下封裝成一個(gè)對(duì)象，這樣在使用的時(shí)候就可以直接拿來用了：

//封裝cookie方法的對(duì)象
var cookie = {
  setCookie:function(key,value,time){
    if(key == undefined){
      return;
    }
    if(time!== undefined){
      var d = new Date();
      d.setTime(d.getTime()+time*1000*60*60*24);
      document.cookie=key+"="+value+";expires="+ d.toGMTString();
    }else{
      document.cookie=key+"="+value;
    }
  },
  getCookie:function(key){
    var index = document.cookie.indexOf(key);
    var returnValue;
    if(index!==-1){
      var tIndex = document.cookie.indexOf(";",index);
      var target = document.cookie.substring(index,tIndex);
      var returnValue = decodeURIComponent(target.replace(key+"=",""))
     }
    return returnValue;
  },
  delCookie:function(key){
    var d = new Date();
    document.cookie=key+"=;expires="+ d.toGMTString();
  }
}


//測(cè)試
cookie.setCookie("home")
cookie.setCookie("name","衛(wèi)旗");
cookie.setCookie("age",22);
cookie.setCookie("sex","男")
cookie.getCookie("sex")
cookie.delCookie("age")

感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

您可能感興趣的文章: