DIV CSS 佈局教程網

不管是筆試還是面試相信大家都會經常遇到問Cookie、LocalStorage、SessionStorage 這三個不同的，什麼不說先上一波圖先：

針對他們大小之分應用場景也有不同：

因為考慮到每個 HTTP 請求都會帶著 Cookie 的信息，所以 Cookie 當然是能精簡就精簡啦，比較常用的一個應用場景就是判斷用戶是否登錄。針對登錄過的用戶，服務器端會在他登錄時往 Cookie 中插入一段加密過的唯一辨識單一用戶的辨識碼，下次只要讀取這個值就可以判斷當前用戶是否登錄啦。localStorage相對cookie大的多，所以可以用來做購物車，h5小游戲，web應用等。

注意：不是什麼數據都適合放在 Cookie、localStorage 和 sessionStorage 中的。使用它們的時候，需要時刻注意是否有代碼存在 XSS(什麼是xxs下回分解) 注入的風險。因為只要打開控制台，你就隨意修改它們的值，也就是說如果你的網站中有 XSS 的風險，它們就能對你的 localStorage 肆意妄為。所以千萬不要用它們存儲你系統中的敏感數據。

   說了他們的好和不好後是時候表演正真技術了（js如何操作他們）：

JS設置cookie:

假設在A頁面中要保存變量username的值("chentutu")到cookie中,key值為name，則相應的JS代碼為：

document.cookie="name="+username;  

JS讀取cookie:

var username=document.cookie.split(";")[0].split("=")[1];  

這是最簡單的操作cookie的方法，下面代碼給大家展示一下cookie的基本操作：

//寫cookies 

function setCookie(name,value，Days) 
{  
    var exp = new Date(); 
    exp.setTime(exp.getTime() + Days*24*60*60*1000); 
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); 
} 

//讀取cookies 
function getCookie(name) 
{ 
    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
 
    if(arr=document.cookie.match(reg))
 
        return unescape(arr[2]); 
    else 
        return null; 
} 
//讀取cookie方法二：
 function getCookie2(key) {
        var arr1 = document.cookie.split('; ');
        for (var i = 0; i < arr1.length; i++) {
            var arr2 = arr1[i].split('=');
            if (arr2[0] == key) {
                return unescape(arr2[1]);
            }
        }
    }
//刪除cookies 
function delCookie(name) 
{ 
    var exp = new Date(); 
    exp.setTime(exp.getTime() - 1); 
    var cval=getCookie(name); 
    if(cval!=null) 
        document.cookie= name + "="+cval+";expires="+exp.toGMTString(); 
} 

localstorage提供了:localStorage.getItem(name);localStorage.setItem(name, value);localStorage.removeItem(name);等方法，用來處理增、刪、查。