JavaScript中的cookie和web storage

Web Storage

實際上由兩部分組成：sessionStorage與localStorage。 sessionStorage用于本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問并且當會話結束后數據也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。 localStorage用于持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的。

cookie

Cookie指某些網站為了辨別用戶身份、進行session跟蹤而儲存在用戶本地終端上的數據，由盧·蒙特利于1993年3月發明。Cookie基于 Internet的各種服務系統應運而生，是由 Web 服務器保存在用戶瀏覽器上的小文本文件，它可以包含有關用戶的信息，是用戶獲取、交流、傳遞信息的主要場所之一，無論何時用戶鏈接到服務器，Web 站點都可以訪問 Cookie 信息。

cookie的屬性字段

通過上面的實例可以知道，給cookie賦值時是不會覆蓋cookie的原有的值，當等號前的屬性名相同時，才會將原來相同屬性名的值覆蓋為后來設置的值。注意，cookie的兩個字段之間是通過一個分號和空格分隔，而不是只有一個分號
當要給cookie設置非自定義的屬性字段時，需要通過字符串追加的方式
例如：

let expireDate = new Date();
document.cookie += ";expires=" + expireDate.toString();

注意： ";expires="中的分號必須有，如果字段前不加分號則會認為這是一個自定義字段

domain

非頂級域名，如二級域名或者三級域名，設置的cookie的domain只能為頂級域名或者二級域名或者三級域名本身，不能設置其他二級域名的cookie，否則cookie無法生成。
頂級域名只能設置domain為頂級域名，不能設置為二級域名或者三級域名，否則cookie無法生成。
二級域名能讀取設置了domain為頂級域名或者自身的cookie，不能讀取其他二級域名domain的cookie。所以要想cookie在多個二級域名中共享，需要設置domain為頂級域名，這樣就可以在所有二級域名里面或者到這個cookie的值了。
頂級域名只能獲取到domain設置為頂級域名的cookie，其他domain設置為二級域名的無法獲取。
總的來說就是，上級域名不能訪問下級域名的cookie，下級域名可以讀取自身及上級域名的cookie，同級域名的cookie不共享，即同級域名之間不能互相訪問對方的cookie，只能訪問自身的cookie。

path

path字段為可以訪問此cookie的頁面路徑。 比如domain是abc.com,path是/test，那么只有/test路徑下的頁面可以讀取此cookie。
expires/Max-Age
expires/Max-Age 字段為此cookie超時時間。若設置其值為一個時間，那么當到達此時間后，此cookie失效。不設置此字段時，默認值是Session，即當瀏覽器關閉(注意：不是瀏覽器標簽頁，而是整個瀏覽器) 后，此cookie失效。
let expireDate = new Date("2019-5-26T09:00:00");
document.cookie += ";expires=" + expireDate.toString();
若要刪除某條cookie則設置此條cookie的expires為當前時間之前的時間的即可
let expireDate = new Date("1970-01-01T00:00:00");
document.cookie += ";expires=" + expireDate.toString();

size

Size字段 此cookie大小。
httpOnly
若此屬性為true，則只有在http請求頭中會帶有此cookie的信息，而不能通過document.cookie來訪問此cookie，設置為true可以減少受到Xss***的風險
secure
secure 字段 設置是否只能通過https來傳遞此條cookie
localstorage/sessionstorage
webstorage并不是要替代cookie，而是為了彌補隨著web的發展，cookie在存儲限制（存儲容量最多為4k），安全性（在http協議中明文傳輸）存在的缺點而提出的
兩者的API是相同的

function  intro

setItem(key, value) 以鍵值對的形式保存一條數據
getItem(key)    根據鍵來獲得值
removeItem(key) 根據鍵來刪除一條數據
key(index)  根據索引獲得鍵的名稱
clear() 刪除全部數據
兩者都有length屬性

sessionStorage.setItem("name", "Jack");
sessionStorage.setItem("phone", "18856894523");
console.log(sessionStorage.getItem('name')); // Jack
console.log(sessionStorage.key(0)); // name
console.log(sessionStorage.length); // 2
sessionStorage.removeItem('phone');
console.log(sessionStorage.length); // 1
sessionStorage.clear();    
console.log(sessionStorage.length); // 0

兩者的比較

localStorage和sessionStorage都是用來存儲客戶端臨時信息的對象。均只能存儲字符串類型的對象，雖然規范中可以存儲其他原生類型的對象，但是目前為止沒有瀏覽器對其進行實現。
localStorage生命周期是永久，除非用戶顯示在瀏覽器提供的UI上清除localStorage信息，否則這些信息將永遠存在。
sessionStorage生命周期為當前窗口或標簽頁，一旦窗口或標簽頁被永久關閉了，sessionStorage存儲的數據就被清空了。
不同瀏覽器無法共享localStorage或sessionStorage中的信息。
相同瀏覽器的不同頁面（頁面屬于相同域名和端口）間可以共享相同的localStorage
不同頁面或標簽頁間無法共享sessionStorage的信息。注意，頁面及標簽頁僅指頂級窗口，如果一個標簽頁包含多個iframe標簽且屬于同源頁面，那么他們之間是可以共享sessionStorage的。
使用window.open打開頁面和改變localtion.href方式都可以獲取到sessionStorage內部的數據

cookie 與 webstorage的區別

存儲限制
每個domain中只能存儲最多20條cookie，cookie數據不能超過4K
webStorage也有存儲大小的限制，但是比cookie大得多，可以達到5M或更大
數據的有效期
sessionStorage：僅在當前的瀏覽器窗口關閉有效；
localStorage：始終有效，除非用戶手動刪除
cookie：cookie過期時間之前一直有效，即使窗口和瀏覽器關閉

作用域

sessionStorage：不在不同的瀏覽器窗口中共享，即使是同一個頁面；
localStorage：同源窗口共享
cookie：同源窗口共享