js讀寫cookie方式以及中文亂碼問題
讀寫cookie是前端工程師在做專案時會經常使用的技術。cookie是瀏覽器提供的機制、是javascript的另一種機制,可以達到真正全域性變數的要求。 它將document 物件的cookie屬性提供給JavaScript。可以由JavaScript對其進行控制,而並不是JavaScript本身的性質。
設定cookie
每個cookie都是一個名/值對,可以把下面這樣一個字串賦值給document.cookie(多個cookie之間用半形的’; ‘分隔)
document.cookie="age=28;userName=hulk";
或:(此時為儲存多個cookie值)
document.cookie ="age=28";
document.cookie="userName=hulk";
注意:cookie 的名或值中不能使用分號(;)、逗號(,)、等號(=)、空格,以及中文(會出現錯誤或亂碼問題)。
如果必須使用上述的特殊字元,則需要用escape()函式進行編碼(以16進位制數的形式轉碼)儲存:
document.cookie="userName="+escape("珊珊"); //cookie的儲存形式為"userName=%u73CA%u73CA"
改變一個cookie的值,只需重新賦值
讀取cookie
cookie的值可以由document.cookie
直接獲得,獲得的是以分號隔開的多個名/值對所組成的字串,這些名/值對包括了該域名下的所有cookie,如:
var cookies = doucment.cookie;
alert(cookies); //"age=28;userName=%u73CA%u73CA"
如果想讀取指定的cookie值,只能自己解析獲得到的包含所有cookie的字串。
例如,要獲取age的值,可以這樣實現:
var age = document.cookie.split("age=")[1].split(";")[0]; //28
如果想要讀取含特殊字元如中文的cookie值,
取出值以後需要使用unescape()進行解碼才能得到原來的cookie值
例如,要獲取userName的值,可以這樣實現:
var name= unescape(document.cookie.split("userName=")[1].split(";")[0]); //珊珊
給cookie設定終止日期
現在的cookie都是單會話cookie,即瀏覽器關閉後這些cookie將會丟失,事實上這些cookie僅僅是儲存在記憶體中,而沒有建立相應的硬碟檔案。
如果需要長期儲存cookie(例如儲存使用者登入的狀態就需要長期儲存),如10天。可以用下面的方式來實現:
<script>
var date = new Date(); //獲取當前時間
date.setTime(date.getTime()+10*24*3600*1000); //獲取10天后的時間戳
//將age和userName兩個cookie設定為10天后過期
document.cookie="age=28;userName=aaa;expires="+date.toGMTString();
</script>
刪除cookie
如果要刪除一個cookie,可以將其過期時間設定為一個過去的時間。
例如刪除age這個cookie:
var date = new Date();
date.setTime(date.getTime()-10000);
document.cookie="age=28;expires="+date.toGMTString();
指定可訪問cookie的路徑
預設情況下,建立的cookie只可以由它所在目錄的 同級目錄 或同級目錄的 子集目錄 訪問。
可以使用path引數設定可訪問cookie的目錄:
document.cookie="age=28; path=/shop"; //表示當前cookie僅能在shop目錄下使用。
或
document.cookie="userId=320; path=/"; //表示當前cookie可在整站使用。
可以通過domain引數來實現 跨主機訪問:
document.cookie="name=value;domain=.baidu.com"; //這樣,所有baidu.com下的主機都可以訪問該cookie