Cookie
- 最初是在客戶端用于存儲會話信息，該標準要求服務器對任意HTTP請求發送Set-Cookie HTTP頭作為響應的部分，其中包括會話信息。例如
HTTP/1.0 200 OK
Content-type: text/html
Set-Cookie: theme=light
Set-Cookie: sessionToken=abc123; Expires=Wed, 09 Jun 2021 10:18:14 GMT
...
- 瀏覽器會存儲這樣的會話信息，并在這之后通過為每個請求添加Cookie HTTP頭將信息發送給服務器
GET /spec.html HTTP/1.1
Host: www.example.org
Cookie: theme=light; sessionToken=abc123
...
- 發送回服務器的額外信息可以用于唯一驗證客戶來自于發送哪個請求
Cookie限制
- cookie在性質上是綁定在特定的域名下的，無法跨域
- 每個域的cookie總數是有限的
- cookie的尺寸是有限制的，最好限制在4095B以內
Cookie構成
- 名稱(name)：一個唯一確定的名稱，必須經過URL編碼
- 值(value)：存儲在cookie中的字符串值，必須經過URL編碼
- 域(domain)：cookie對哪個域是有效的，所有向該域發送的請求中都會包含這個cookie信息，這個值可以包含子域，也可以不包含。
- 路徑(path)：對于指定域中的那個路徑，應該向服務器發送cookie。可以用來只發送給子域。
- 失效時間(expries)：表示cookie何時應該被刪除的時間戳，默認時瀏覽器會話結束即刪除所有cookie，這個值是GMT格式的日期
- 安全標志(secure)：指定后，cookie只有在使用SSL連接的時候才發送到服務器
JS中的Cookie
讀取寫入和刪除
var CookieUtil = {
get: function (name){
var cookieName = encodeURIComponent(name) + "=",
cookieStart = document.cookie.indexOf(cookieName),
cookieValue = null,
cookieEnd;
if (cookieStart > -1){
cookieEnd = document.cookie.indexOf(";", cookieStart);
if (cookieEnd == -1){
cookieEnd = document.cookie.length;
}
cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
}
return cookieValue;
},
set: function (name, value, expires, path, domain, secure) {
var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value);
if (expires instanceof Date) {
cookieText += "; expires=" + expires.toGMTString();
}
if (path) {
cookieText += "; path=" + path;
}
if (domain) {
cookieText += "; domain=" + domain;
}
if (secure) {
cookieText += "; secure";
}
document.cookie = cookieText;
},
unset: function (name, path, domain, secure){
this.set(name, "", new Date(0), path, domain, secure);
}
};
Web storage
- 提供一種在cookie之外存儲會話數據的途徑
- 提供一種存儲啊大量可以跨會話存在的數據的機制
- 比起cookie，這里存儲的數據是嚴格控制在客戶端，而無需持續將數據發送回服務器
Storage類型方法
- clear()：刪除所有值
- getItem(name)：根據指定的名字name獲取對應的值
- key(index)：根據指定index位置處的值的名字
- removeItem(name)：刪除由name指定的名值對
- setItem(name, value)：為指定的name設置一個對應的值
sessionStorage
- sessionStorage對象存儲特定某個對話的數據，可以跨越頁面刷新而存在
localStorage
- 要訪問同一個localStorage對象，頁面必須來自同一個域名，使用同一種協議在同一個端口上。
- 存儲在 localStorage 里面的數據沒有過期時間（expiration time），而存儲在 sessionStorage 里面的數據會在瀏覽器會話（browsing session）結束時被清除，即瀏覽器關閉時。
localStorage vs. sessionStorage vs. Cookies
- In terms of capabilities, cookies only allow you to store strings. sessionStorage and localStorage allow you to store JavaScript primitives but not Objects or Arrays (it is possible to JSON serialise them to store them using the APIs). Session storage will generally allow you to store any primitives or objects supported by your Server Side language/framework.
