JavaScript中Cookie的使用之如何設(shè)置失效時間

更新時間：2022年12月07日 08:57:56 作者：鍵.

這篇文章主要介紹了JavaScript中Cookie的使用之如何設(shè)置失效時間問題，具有很好的參考價值，希望對大家有所幫助。

1.什么是Cookie？

1.1簡介

主要用于存儲訪問過的網(wǎng)站數(shù)據(jù)，存儲瀏覽器的信息到本地計算機中，用于客戶端和服務(wù)器端的通訊

Cookie 是為了解決“如何記住用戶信息”而發(fā)明的：

當(dāng)用戶訪問網(wǎng)頁時，他的名字可以存儲在 cookie 中。
下次用戶訪問該頁面時，cookie 會“記住”他的名字。

注意:如果瀏覽器完全禁止cookie,大多數(shù)網(wǎng)站的基本功能都將無法正常使用，chrome瀏覽器不支持本地文件的cookie的讀取

1.2特點

以文本形式保存(.txt)
cookie存儲信息不安全（不能存放重要的信息）
cookie中有域（domain）和路徑的概念,瀏覽器是一個比較安全的環(huán)境，所以不同的域之間不能直接訪問（js的同源策略限制）

2.JavaScript操作Cookie

2.1基礎(chǔ)操作

JavaScript 可以用 document.cookie 屬性創(chuàng)建、讀取、刪除 cookie。

document.cookie='name=托馬'
console.log(document.cookie)

Cookie的常用屬性：

name cookie的名字(鍵)
value cookie存放的值
expires：指cookie過期的時間（該時間為世界時間 UTC時間）也稱為格林威治時間
max-age:指cookie最大的存活有效期（單位：秒）
domain: 指的是cookie當(dāng)前的域
path:指cookie當(dāng)前的路徑
size:指cookie存放的大小
secure:指cooke的安全屬性

注意：expires和max-age的默認值為session代表關(guān)閉瀏覽器，該cookie則清空、失效

2.2設(shè)置失效時間

需求：設(shè)置一個60分鐘后失效的Cookie

function setCookie(name,val,min){
    var now=new Date();
    //設(shè)置時間
    now.setMinutes(now.getMinutes()+min)

    //設(shè)置Cookie
    document.cookie=name+'='+val+';expires='+now.toUTCString()
}
setCookie('托馬','火',60)

控制臺顯示的失效時間

系統(tǒng)當(dāng)前時間：

一個小時候的時間應(yīng)該為16:55，但控制臺輸出的是08:55,因為這個時間是世界時間（UTC時間），也稱為格林威治時間。

百度一下查得：

所以8:55+8:00=16:55，我們設(shè)置的失效時間成功。

提前清除緩存：

function setCookie(name,val,min){
   var now=new Date();
      //設(shè)置時間
      now.setMinutes(now.getMinutes()+min)

      //設(shè)置Cookie
      document.cookie=name+'='+val+';expires='+now.toUTCString()
  }
  setCookie('托馬','火',1)

//通過一次性定時器提前清除Cookie
setTimeout(function(){
	setCookie('托馬','',-1)
},3000)
//	setCookie('托馬','',-1)
//第一個參數(shù)一定要對應(yīng)，不然找不到這個Cookie
//第二個參數(shù)可寫可不寫
//第三個參數(shù)設(shè)置為-1

演示結(jié)果：