­

漫談客戶端存儲技術之Cookie篇

Cookie

說到Cookie，不管作為前端開發人員還是後端開發人員並不陌生，作為一種最古老、最穩定的客戶端存儲形式，即便是在當下各種新的客戶端存儲技術層出不窮的時代，它仍舊有其一席之位。Cookie 使用 HTTP header 發送，具體來說是名為「Cookie」的 HTTP header，每次請求的時候都會由瀏覽器發送到伺服器，同時又從伺服器發送到瀏覽器，是一種雙向傳輸的形式。
=== Request Headers ===
......
Cookie: AGL_USER_ID=f695f47d-f643-46cec-bf63-6255asdasdqwe4b3a24
... ......
以前，每個域名最多只能有 20個 Cookie，但如今的瀏覽器似乎已經去掉了這個限制（瀏覽器沒有限制它可以擁有的 Cookie 數量），但是最佳的實踐是每個域名 50個、大小總計 4KB 的 Cookie 是安全的（Cookie過多有可能導致後台服務報錯）。
每個Cookie 對應唯一的域名。這也就意味著在A網站域名上設置的 Cookie 值無法在B網站使用。從而在一定程度上保證了網站的安全，畢竟任何人都不希望其它網站影響自己的網站上使用Cookie。 另外Cookie 也可以對應唯一的子域名。例如， map.baidu.com 是 baidu 網站的一個獨立的子域名。你可以創建只有map.baidu,com可以讀取的 Cookie，也可以創建 www.baidu.com 和 map.baidu.com 都可以讀取Cookie
 
1、創建Cookie
 
     Cookie 默認是沒有 API的。要使用 Cookie的話，只需要在程式碼中寫入如下程式碼。即可創建一個 Cookie
1 document.cookie = 'cookname=cookievalue' // 默認設置
 
     再者。你還可以設置Cookie的過期時間。我們只需要在 Cookie 值後面使用一個分號然後追加一個exprires的關鍵字等於一個時間即可
   
document.cookie = 'cookname=cookievalue;expires=Mon Jul 04 2022 16:36:24 GMT'
 
    另外還可以進一步擴展，指定該 Cookie 只對某個域名有效，如下，該Cookie只在域名為www.xxx.com的網站中生效。具體還是根據自己項目的需要來設置
 
document.cookie = 'cookname=cookievalue;expires=Mon Jul 04 2022 16:36:24 GMT; domain=www.xxx.com'

 

2、讀取Cookie
 
    Cookie的讀取相對來說就要簡單很多的，我們只要通過document.cookie的方式就可以獲取到網站上所設置的Cookie，
     
document.cookie

 

3、刪除Cookie
 
　　假使你要刪除 Cookie得話，只需要將其過期時間設置成過去的時間即可（名稱必須與你想要刪除的 Cookie 名稱一致）
　　 
document.cookie = 'cookname=cookievalue; expires=Thu, 01 Jan 1970 00:00:00 GMT'

 

簡易版封裝

// 簡單封裝
    const CookieUtile = {
        // 設置
        setCookie(key, value, time) {
            const date_ = new Date() 
            date_.setDate(date_.getDate() + time) // 當前時間+過期時間
            document.cookie = key + '=' + value + ';expires=' + date_ // 寫入到document
        },
        // 設置
        getCookie(key) {
            const CookieArray = document.cookie.split(';')  // 多個cookie通過;分割為多個由'鍵=值'組成的數組
            for (let i = 0; i < array.length; i++) {
                const newCookieArray = CookieArray[i].split('=') //去掉中間的等號  得到只有鍵值組成的新數組
                const newCookieKey = newCookieArray[0].replace(/^\s/, '') // 去除多個cookie存值的時候可能出現cookie的值名前面有空格的情況
                if (newCookieKey == key) {
                    return newCookieArray[1]
                }
                 return ''
            }
        },
        // 刪除
        getCookie(key) {
            this.setCookie('name', '', -1);
        }

    }

 

 



 





		  				

		  				

													


						
							

							
																
Tags:      

																

								

							

						
						
						


						 

							
					

					    
									

													

													
											


			


			


	

		
VirMach 便宜 VPS
 


QNews
 
QNews