這篇文章給大家分享的是有關javascript如何設置cookie的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
在javascript中，可以使用document對象的cookie屬性來設置、讀取或刪除cookie，語法“document.cookie="cookieName=Value;expires=過期時間";”。
本教程操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。
1，什么是cookie
把web頁面加載到瀏覽器所使用的HTTP是一種"無狀態"協議,也就是說，當服務器把頁面發送給瀏覽器之后，它就認為事物完成了，并不保存任何信息。這給在瀏覽器會話期間維持某種連續性帶來了困難，比如記錄用戶已經訪問或下載過哪些內容，或是記錄用戶在私有區域的登錄狀態。
cookie就是解決這個問題的一個途徑。舉例來說，cookie可以記錄用戶的最后一次訪問，保存用戶偏好設置的列表，或是當用戶繼續購物時保存購物車里的物品。在正確使用的情況下，cookie能夠改善站點的用戶體驗。
cookie本身是一些短小的信息串，能夠由頁面保存在用戶的計算機上，然后可以被其他頁面讀取。cookie一般都設置為在一定時間后失效。
cookie的局限
瀏覽器對于能保存的cookie數量有所限制，通常是幾百個或多一點。一般情況下，每個域名20個cookies是允許的，而每個域最多能保存4KB的cookie。
除了大小限制可能導致的問題，有很多原因都可能導致硬盤上的cookie消失，比如到達有效期了，或是用戶清理cookie信息了，或是換用其他瀏覽器了。因此，永遠都不應該使用cookie保存重要數據，而且在編寫代碼時一定要考慮到不能獲取到所期望cookie時的情況
2，document.cookie屬性
JavaScript使用document對象的cookie屬性來創建 、讀取及刪除cookie。
每個cookie基本上就是一個由成對的名稱和值組成的字符串，像下面這樣:
username=sam
當頁面加載到瀏覽器里，瀏覽器會收集與頁面相關的全部cookie，放到類似字符串的document.cookie屬性里。在這個屬性里，每個cookie是以分號分隔的:
username=sam;location=China;
#我講document.cookie稱作"類似字符串"的屬性，因為它并不是真正的字符串，只是在提取cookie信息時，這個屬性表現得像個字符串而已
數據的編碼和解碼
某些字符不能在cookie里使用，包括分號，逗號以及空白符號(比如空格和制表符)。在把數據存儲到cookie之前，需要對數據進行編碼，以便于實現正確的存儲。
在存儲信息之前，使用JavaScript的escape()函數進行編碼，而獲得原始的cookie數據時就使用相應的unescape()函數進行解碼。
excape()函數把字符串里任何非ASCII字符都轉換為相應的2位或4為十六進制格式，比如空格轉換為%20,&轉換為%26。
舉例來說，下面的代碼會輸出變量str里保存的原始字符串及escape()編碼以后的結果:
<html>
<head>
<script>
function hello(){
var str = 'Here is a (short) piece of text.';
document.write(str = '<br />' + escape(str));
}
</script>
</head>
<body>
<div id="div1">hello owrld</br>
<input type="button" name="111" οnclick="hello()" value = "來按我呀">
</div>
</body>
</html>
可以看到空格被表示為%20，左括號是%28,右括號是%29。
3，cookie組成
document.cookie里的信息看上去就像是由成對的名稱和值組成的字符串，每一對數據的形式是:
name=value
但實際上，每個cookie還包含其他一些相關信息，下面來分別介紹。
cookieName 和 cookieValue
cookieName和cookieValue就是在cookie字符串里看到的name=value里的名稱和值。
domain
domain屬性向瀏覽器指明cookie屬于哪個域。這個屬性是可選的，在沒有指定時，默認值是設置cookie的頁面所在的域。
這個屬性的作用在于控制子域對cookie的操作。距離來說，如果設置其為www.example.com，那么子域code.example.com里的頁面就不能讀取這個cookie。但如果domain屬性設置為example.com，那么code.example.com里的頁面就能訪問這個cookie了。
path
path屬性指定可以使用cookie的目錄。如果只想讓目錄documents里的頁面設置cookie的值，就把path設置為/documents。這個屬性是可選的，常用的默認路徑是/，表示cookie可以在整個域中使用。
secure
secure屬性是可選的，而且幾乎很少使用。它表示瀏覽器在把整個cookie發送給服務器時，是否應該使用SLL安全標準。
expires
每個cookie都有一個失效日期，過期就自動刪除了。expires屬性要以UTC時間表示。如果沒有設置這個屬性，cookie的生命期就和當前瀏覽器會話一樣長，會在瀏覽器關閉時自動刪除。
4，編寫cookie
要編寫新的cookie，只要把包含所需屬性的值賦予document.cookie就可以了:
document.cookie = "username=sam;expires=15/05/2018 00:00:00"
使用javascript的Date對象可以避免手工輸入日期和時間格式；
var cookieDate = new Date(2018,05,15); document.cookie = "username=sam;expires="+cookieDate.toUTCString();
這樣就能達到和前面一樣的結果。
#注意這里使用了cookieDate.toUTCString()函數，而不是cookieDate.toString();這是因為cookie的時間要以UTC格式設置。
在實際編碼時，應該用excape()函數來確保在給cookie賦值時不會有非法字符:
var cookieDate = new Date(2018,05,15); var user = "Sam Jones"; document.cookie = "username="+excape(user)+";expires="+cookieDate.toUTCString();
5，編寫cookie的函數
很自然就會想到編寫一個函數專門用于生成cookie，完成編碼和可選屬性的組合操作。下面的程序清單就列出了一個這樣的程序代碼:
function createCookie(name,value,days,path,domain,secure){
if(days){
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = date.toGMTString();
}
else var expires = "";
cookieString = name + "=" +excape(value);
if(expires) cookieString += ";expires=" +expires;
if(path) cookieString += ";path=" + escape(path);
if(domain) cookieString += ";domain=" + escape(domain);
if(secure) cookieString += ";secure=" + escape(secure);
document.cookie = sookieString;
}這個函數的執行的操作是相當直觀的，name和value參數組合得到"name = value",其中的value還經過編碼以避免非法字符。
在處理有效期時，使用的參數不是具體日期，而是cookie有效的天數。函數根據這個天數生成有效的日期字符串。
其他屬性都是可選的，如果設置了，就會附加到組成cookie的字符串里。
感謝各位的閱讀！關于“javascript如何設置cookie”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
