JS 中 cookie 的使用
1、cookie 是什麽？
①、cookie 是存儲於訪問者計算機中的變量。每當一臺計算機通過瀏覽器來訪問某個頁面時，那麽就可以通過 JavaScript 來創建和讀取 cookie。
②、實際上 cookie 是存於用戶硬盤的一個文件，這個文件通常對應於一個域名，當瀏覽器再次訪問這個域名時，便使這個cookie可用。因此，cookie可以跨越一個域名下的多個網頁，但不能跨越多個域名使用。
③、不同瀏覽器對 cookie 的實現也不一樣。即保存在一個瀏覽器中的 cookie 到另外一個瀏覽器是 不能獲取的。
PS：cookie 和 session 都能保存計算機中的變量，但是 session 是運行在服務器端的，而客戶端我們只能通過 cookie 來讀取和創建變量
2、cookie 能做什麽？
①、用戶在第一次登錄某個網站時，要輸入用戶名密碼，如果覺得很麻煩，下次登錄時不想輸入了，那麽就在第一次登錄時將登錄信息存放在 cookie 中。下次登錄時我們就可以直接獲取 cookie 中的用戶名密碼來進行登錄。
PS:雖然 瀏覽器將信息保存在 cookie 中是加密了，但是可能還是會造成不安全的信息泄露
②、類似於購物車性質的功能，第一次用戶將某些商品放入購物車了，但是臨時有事，將電腦關閉了，下次再次進入此網站，我們可以通過讀取 cookie 中的信息，恢復購物車中的物品。
PS：實際操作中，這種方法很少用了，基本上都是將這些信息存儲在數據庫中。然後通過查詢數據庫的信息來恢復購物車裏的物品
③、頁面之間的傳值。在實際開發中，我們往往會通過一個頁面跳轉到另外一個頁面。後端服務器我們可以通過數據庫，session 等來傳遞頁面所需要的值。但是在瀏覽器端，我們可以將數據保存在 cookie 中，然後在另外頁面再去獲取 cookie 中的數據。
PS：這裏要註意 cookie 的時效性，不然會造成獲取 cookie 中數據的混亂。
3、怎麽使用 cookie？
①、語法
document.cookie = "name=value;expires=evalue; path=pvalue; domain=dvalue; secure;”
②、對各個參數的解釋
一、name=value 必選參數
這是一個鍵值對，分別表示要存入的 屬性 和 值。
比如：
?| 1 2 3 |
document.cookie="name=中文";
//為了防止中文亂碼，我們可以使用encodeURIComponent()編碼；decodeURIComponent()解碼
document.cookie = encodeURIComponent("name")+"="+encodeURIComponent("中文");
|
二、expires=evalue 可選參數
該對象的有效時間（可選）只支持GTM 標準時間，即要將時間轉換，toUTCString()（默認為當前瀏覽器會話有用，關閉瀏覽器就消失）;
比如：
var date = new Date();
date.setTime(date.getTime()+2000);//獲取當前時間並加上 2 秒鐘
//alert(date.toUTCString());//格林威治時間 (GMT) 把 Date 對象轉換為字符串，並返回結果。
//alert(date.toGMTString());//與上面的結果一樣，但是這個方法已經被上面取代了
document.cookie="name=vae;expires="+date.toUTCString();
alert(document.cookie); // name=vae
setTimeout(function(){alert(document.cookie)},4000);//4 秒後打印空的字符串
三、path=pvalue 可選參數
限制訪問 cookie 的目錄，默認情況下對於當前網頁所在的同一目錄下的所有頁面有效
四、domain=dvalue 可選參數
用於限制只有設置了的域名才可以訪問；如果沒有設置，則默認在當前域名訪問
比如設置 test*.com 表示域名為test*.com的服務器共享該Cookie
五、secure=true|false 可選參數，默認是 true 不安全傳輸
安全設置，指明必須通過 安全的通信通道來傳輸（https) 才能獲得 cookie,true 不安全，默認值；false 安全，必須通過 https 來訪問
比如：如果你設置 document.cookie = "name=vae;secure"
上面的代碼如果是在 http 的協議中訪問，那麽是訪問不了的
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
//設置 cookie
function setCookie(objName, objValue, objHours){//添加cookie
var str = objName + "=" + encodeURIComponent(objValue);
if (objHours > 0) {//為0時不設定過期時間，瀏覽器關閉時cookie自動消失
var date = new Date();
var ms = objHours * 3600 * 1000;
date.setTime(date.getTime() + ms);
str += "; expires=" + date.toUTCString();
}
document.cookie = str;
}<br>
//獲取 cookie
function getCookie(objName){//獲取指定名稱的cookie的值
//多個cookie 保存的時候是以 ;空格 分開的
var arrStr = document.cookie.split("; ");
for (var i = 0; i < arrStr.length; i++) {
var temp = arrStr[i].split("=");
if (temp[0] == objName){
return decodeURIComponent(temp[1]);
}else{
return "";
}
}
}
//為了刪除指定名稱的cookie，可以將其過期時間設定為一個過去的時間
function delCookie(name){
var date = new Date();
date.setTime(date.getTime() - 10000);
document.cookie = name + "=a; expires=" + date.toUTCString();
}
|
註意：
（1）cookie可能被禁用。當用戶非常註重個人隱私保護時，他很可能禁用瀏覽器的cookie功能；
（2）cookie是與瀏覽器相關的。這意味著即使訪問的是同一個頁面，不同瀏覽器之間所保存的cookie也是不能互相訪問的；
（3）cookie可能被刪除。因為每個cookie都是硬盤上的一個文件，因此很有可能被用戶刪除；
（4）cookie安全性不夠高。所有的cookie都是以純文本的形式記錄於文件中，因此如果要保存用戶名密碼等信息時，最好事先經過加密處理。
（5）cookie 在保存時，只要後面保存的 name 相同，那麽就會覆蓋前面的 cookie，註意是完全覆蓋，包括失效時間，path 等等
JS 中 cookie 的使用