請描述一下 cookies，sessionStorage 和 localStorage 的區別

原文：http://blog.csdn.net/lxcao/article/details/52809939

 

相同點：都存儲在客戶端
不同點：

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; //密碼