細講前端設置cookie
引言
我們都知道如果想做一個用戶登錄並使瀏覽器保存其登錄信息，使得用戶下次再訪問網頁的時候無需再次進行登錄操作，我們需要用到 cookies ， 今天我們就來講講前端如何給客戶端設置 cookie
正文
cookie 只有在服務環境下，才能設置，所以如果要嘗試練習設置cookie的話，可以使用webstorm編輯器， 它內部自帶服務環境，如果用別的編輯器的小伙伴的話，先自己搭一個簡單的服務環境哦~
一、設置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>
二、查看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值
三、刪除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 已經被刪除了
四、封裝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的簡單實用就講到這里了， 看完的小伙伴可以趕緊自己動手試一試啦， 不要一看就會，一做就廢哦~ 我們下個文章再見吧~