細講前端設置cookie， 儲存用戶登陸信息

細講前端設置cookie

• 引言
• 正文
• 1、設置cookie
• 2、查看cookie
• 3、刪除cookie
• 4、封裝cookie操做
• 結束語

引言

咱們都知道若是想作一個用戶登陸並使瀏覽器保存其登陸信息，使得用戶下次再訪問網頁的時候無需再次進行登陸操做，咱們須要用到 cookies ， 今天咱們就來說講前端如何給客戶端設置 cookie

正文

cookie 只有在服務環境下，才能設置，因此若是要嘗試練習設置cookie的話，可使用webstorm編輯器， 它內部自帶服務環境，若是用別的編輯器的小夥伴的話，先本身搭一個簡單的服務環境哦~

1、設置cookie

設置 cookie 其實很簡單，只須要這樣一行代碼

<script>
    document.cookie = 'name=張三'
</script>

咱們來看看瀏覽器上 cookie 的信息， 能夠看到圖上顯示該cookie到期時間就是會話結束，即關閉瀏覽器 cookie 清除，這是由於咱們在設置cookie時，只設置了 cookie的值，可沒設置到期時間。

可是咱們知道 cookie 是用來保存用戶的登陸信息的， 咱們不能讓 cookie 一直在瀏覽器上存在，須要給 cookie 設置一個到期時間， 接下來咱們來看這樣一段代碼

<script>
    let data = new Date().getTime()   //先將此時的時間轉化爲毫秒
    let new_data = new Date(data + 7*24*60*60*1000)  //將過時時間設置爲7天后
    // toUTCString() 是將時間根據世界時轉換爲字符串
    document.cookie = 'name=張三;' + 'expires=' + new_data.toUTCString()
</script>

咱們來看一下設置了過時時間後的cookie 是一個什麼樣的狀況

明顯能夠看到，此時瀏覽器上的 cookie 有了一個過時時間， 因此咱們再一次重啓瀏覽器， 這個 cookie 仍是存在的

注意：這裏補充一點，咱們若是想要設置多條 cookie ， 咱們必須一條一條設置，不能批量設置，例如若是要設置兩條cookie的話：

<script>
    let data = new Date().getTime()   //先將此時的時間轉化爲毫秒
    let new_data = new Date(data + 7*24*60*60*1000)  //將過時時間設置爲7天后
    //設置第一條 cookie
    document.cookie = 'name=張三;' + 'expires=' + new_data.toUTCString()
    //設置第二條 cookie
    document.cookie = 'age=19;' + 'expires=' + new_data.toUTCString()
</script>

2、查看cookie

那麼咱們如何查看瀏覽器上的cookie呢？這就很是簡單了

<script>

    console.log(document.cookie)
    
</script>

能夠看到返回的是一串字符串， 每一個cookie由分號隔開

若是咱們想要獲取cookie中某個單獨的 cookie，咱們能夠用正則進行匹配

<script>
    // name=張三 ; age=19
    
    let re = new RegExp("\s?" + "name" + "=([^;]+)(;|$)")
    console.log(document.cookie.match(re)[1])

</script>

咱們來看一下輸出的值：

這樣就獲得了咱們想要查詢的單個cookie值

3、刪除cookie

設置cookie是設置了一個cookie值並給它一個過時時間，這樣 cookie纔不會由於關閉瀏覽器而立馬失效。因此刪除 cookie 咱們只須要給該cookie設置一個比如今時間還早的時間讓cookie過時。

<script>
    let data = new Date().getTime()   //先將此時的時間轉化爲毫秒
    let old_data = new Date(data - 24*60*60*1000) //將過時時間設爲24小時前
    document.cookie = 'name=張三;' + 'expires=' + old_data.toUTCString()
</script>

咱們只須要給咱們須要刪除的 cookie 設置一個過時時間爲比如今的時間還早的時間，就能夠刪除這個cookie

刪除後從新打開網頁，咱們能夠看到 名稱爲 name 的 cookie 已經被刪除了

4、封裝cookie操做

操做cookie有這麼多方法， 咱們對他們進行封裝， 方便咱們使用他們。

• 封裝設置cookie的函數

<script>
   
	 //設置cookie
	 function setCookies(obj, limitTime) {
	     let data = new Date( new Date().getTime() + limitTime*24*60*60*1000 ).toUTCString()
	
	     for(let i in obj) {
	         document.cookie = i + '=' + obj[i] + ';expires=' + data
	     }
	
	 }
    
</script>

讓咱們來使用一下setCookies函數

// 第一個參數爲對象，用鍵值對的形式傳入咱們想設置的cookie名和值
// 第二個參數爲過時時間，單位爲天
setCookies({
	name: '張三',
    age: 19,
    like: '羽毛球'
 }, 7)

• 封裝查看cookie函數

//查看cookie
	function searchCookie(cookieName) {
	    let re = new RegExp("\s?" + cookieName + "=([^;]+)(;|$)")
	    return document.cookie.match(re)[1]
	}

讓咱們來使用一下 searchCookie 函數

// 該函數只有一個參數，即咱們須要查詢的cookie名稱，而後返回一個值
let cookieValue = searchCookie(name)
console.log(cookieValue)

// 張三

• 刪除cookie

//刪除cookie
	function removeCookies(cookieList) {
	    let data = new Date(new Date().getTime() - 24*60*60*1000).toUTCString()
	    for(let i in cookieList) {
	        document.cookie = cookieList[i] + '= ;' + 'expires=' + data
	    }
	}

讓咱們來使用一下 removeCookies 函數

//該函數只有一個參數，傳入一個數組，每一個元素爲咱們想要刪除的cookie名
removeCookies(['name', 'age'])

結束語

好了，前端設置cookie的簡單實用就講到這裏了， 看完的小夥伴能夠趕忙本身動手試一試啦， 不要一看就會，一作就廢哦~ 咱們下個文章再見吧~