前端存儲淺談——cookie、sessionStorage、localStorage

cookie

存於客戶端，因爲http協議是無狀態的，只要客戶端與服務端數據交換完，就會斷掉連接，若是再請求 就再次連接，而服務器是沒法保存這種連接的狀態，只有不停地連接、斷連接，因此須要cookie來作一個身份認證，再次請求的時候服務器會根據這個身份id進行用戶判斷。

但要注意cookie是不可跨域的，他會根據域名來區分是向哪一個服務器發送數據。

其次，cookie不能存一些敏感信息， 由於經過瀏覽器獲取cookie很方便，很容易泄露一些我的信息，若是想存 最好是對數據進行加密

cookie的一些api,經過本身封裝的例子看

var Cookie = {
//分裝獲取的方法 Cookie.get('name')
    get: function(key){
        var cookiestr = document.cookie; //讀取本地的cookie
        var list = cookiestr.split("; ");
        for(var i=0; i<list.length; i++){
            var kvs = list[i].split("=");
            if(kvs[0]==key) {
                return kvs[1];     //查詢是否存在 存在返回 不然返回null
            }
        }
        return null;
    },
    //封裝寫入cookie的方法 包括內容、有效期、路徑，是否安全傳輸
    set: function(key,value,expires,path){
        if( (typeof expires == "number") || (typeof expires == "string")) {
        expires = Number(expires);
        if(isNaN(expires)) {
            expires = undefined;
        } else {
            var d = new Date();
            d.setDate(d.getDate()+expires);
            expires = d;
        }
    } 
    if( !(expires instanceof Date) && typeof expires == "object") {
        expires = undefined;
    }
//cookie的寫入 用json字符串形式 調用的時候用Cookie.set('name','zhangsan','/')
    document.cookie = key+"="+value+";" + (expires?"expires="+expires+";":"") + (path?"path="+path+";":"");
    }
}

HTML5提供了兩種本地存儲的方式 sessionStorage 和 localStorage

sessionStorage

是用戶從打開回話窗到關閉會話窗這一段時間有效，關閉以後存的數據就會被刪除

sessionStorage.setItem('name','alice');
var username = sessionStorage.getItem('name')

sessionStorage.remove('name')
sessionStorage.clear()

localStorage 會一直存在瀏覽器中 除非人工清除 方法同上

其次，咱們能夠對localstorage和sessionStorage的屬性值進行遍歷

var storage = window.localStorage;
var length = storage.length;
for(let i=-;i<length;i++){
    console.log(storage.key(i),storage.getItem(key))
}

cookie 和 localStorage sessionStorage 區別

三者都存在客戶端 並且同源，同協議 同域名 同端口

cookie會在http請求中攜帶，會在服務器和客戶端間傳遞，因此cookie會有大小限制，不能超過4k，並且存在在設定的path下。

sessionStorage和localStorage只會存在本地，大小要比cookie大，其中sessionStorage是僅在當前的會話窗口有效，不是全部窗口均可以共享數據的。其它兩個是真個瀏覽器均可以數據共享。