題目點評

1.儲存大小

• cookie資料大小不能超過4k。
• sessionStorage和localStorage 雖然也有儲存大小的限制，但比cookie大得多，可以達到5M或更大。

2.有效時間

• localStorage    儲存持久資料，瀏覽器關閉後資料不丟失除非主動刪除資料；
• sessionStorage  資料在當前瀏覽器視窗關閉後自動刪除。
• cookie          設定的cookie過期時間之前一直有效，即使視窗或瀏覽器關閉

3. 資料與伺服器之間的互動方式

• cookie的資料會自動的傳遞到伺服器，伺服器端也可以寫cookie到客戶端
• sessionStorage和localStorage不會自動把資料發給伺服器，僅在本地儲存。

----------------------------------------------------------------------------------------------------------------------------------------

額外拓展【加分項】：Cookie的操作（有點小難度）防止面試官細問cookie的操作。

設定Cookie 

cookie

的幾個要素

cookie的內容：採用 key=value;key=value……儲存，引數名自定義

cookie的過期時間：使用引數expires

cookie的路徑：使用引數path，"/"表示這個網站的頁面，不推薦!容易產生衝突

注意：形如“/pro/index.html”路徑，在google瀏覽器正常，在IE瀏覽器得不到值

cookie的表示方式示例

var name = "jack";
var pwd = "123";
var now = new Date();
now.setTime(now.getTime() +1 * 24 * 60 * 60 * 1000);//轉毫秒
var path = "/";//可以是具體的網頁
document.cookie = "name=" + name + ";expires=" + now.toUTCString() + ";path=" + path;//姓名
document.cookie= "pwd=" + pwd + ";expires=" + now.toUTCString()+ ";path=" + path; //密碼
 

讀取cookie

獲取cookie內容

vardata=document.cookie;//獲取對應頁面的cookie

解析cookie

方式1：擷取字串

function getKey(key) {
    var data = document.cookie;
    var findStr = key + "=";
    //找到key的位置
    var index = data.indexOf(findStr);
    if (index == -1)
        return null;
    var subStr = data.substring(index +findStr.length);
    var lastIndex = subStr.indexOf(";");
    if (lastIndex == -1) {
        return subStr;
 } else {
        return subStr.substring(0,lastIndex);
 }
}

方式2：使用正則表示式+JSON

function getKey(key) {
    return JSON.parse("{\"" +document.cookie.replace(/;\s+/gim, "\",\"").replace(/=/gim, "\":\"") + "\"}")[key];
}

清除cookie

var name = null;
var pwd = null;
var now = new Date();
var path = "/";//可以是具體的網頁
document.cookie= "name=" + name + ";expires=" + now.toUTCString()+ ";path=" + path;//姓名
document.cookie = "pwd=" + pwd + ";expires=" + now.toUTCString()+ ";path=" + path; //密碼