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

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

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

1.什么是Cookie？

1.1簡(jiǎn)介

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

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

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

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

1.2特點(diǎn)

以文本形式保存(.txt)
cookie存儲(chǔ)信息不安全（不能存放重要的信息）
cookie中有域（domain）和路徑的概念,瀏覽器是一個(gè)比較安全的環(huán)境，所以不同的域之間不能直接訪問(wè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過(guò)期的時(shí)間（該時(shí)間為世界時(shí)間 UTC時(shí)間）也稱(chēng)為格林威治時(shí)間
max-age:指cookie最大的存活有效期（單位：秒）
domain: 指的是cookie當(dāng)前的域
path:指cookie當(dāng)前的路徑
size:指cookie存放的大小
secure:指cooke的安全屬性

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

2.2設(shè)置失效時(shí)間

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

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

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

控制臺(tái)顯示的失效時(shí)間

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

一個(gè)小時(shí)候的時(shí)間應(yīng)該為16:55，但控制臺(tái)輸出的是08:55,因?yàn)檫@個(gè)時(shí)間是世界時(shí)間（UTC時(shí)間），也稱(chēng)為格林威治時(shí)間。

百度一下查得：

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

提前清除緩存：

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

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

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

演示結(jié)果：