cookie、sessionStorage、localStorage 詳解及應用場景

時間 2019-11-07

標籤 cookie sessionstorage localstorage 詳解應用場景欄目 HTML 简体版

原文原文鏈接

cookie、sessionStorage、localStorage 詳解及應用場景

Cookie的做用是與服務器進行交互，做爲HTTP規範的一部分而存在，而Web Storage僅僅是爲了在本地「存儲」數據而生javascript

cookie

Cookie的做用是與服務器進行交互，做爲HTTP規範的一部分而存在html

瞭解cookie

要表示惟一的一個cookie值須要：name、domain、path前端
一個cookie就是一個小型的文本文件html5
雖然cookie保存在瀏覽器端，可是通常是在服務器端設置的。java
能夠在HTTP返回體裏，經過設置Set-Cookie來告訴瀏覽器端所要存儲的cookie。chrome
用來保存客戶瀏覽器請求服務器頁面的請求信息後端

cookie相關字段的說明

名稱：一個惟一肯定cookie的名稱。cookie名稱是不區分大小寫的。cookie的名稱必須是通過URL編碼的。數組
值：儲存在cookie中的字符串值。值必須被URL編碼。瀏覽器
域：cookie對於哪一個域是有效的。全部向該域發送的請求中都會包含這個cookie信息。若是沒有明確設定，那麼這個域會被認做來自設置cookie的那個域。安全
路徑：對於指定域中的那個路徑，應該向服務器發送cookie。例如，你能夠指定cookie只有從http://www.wrox.com/books/中才能訪問，那麼http://www.wrox.com的頁面就不會發送cookie信息，即便請求都是來自同一個域的。
失效時間：表示cookie什麼時候應該被刪除的時間戳（也就是，什麼時候應該中止向服務器發送這個cookie）。默認狀況下，瀏覽器會話結束時即將全部cookie刪除；不過也能夠本身設置刪除時間。這個值是個GMT格式的日期（Wdy,DD-Mon-YYYY HH:MM:SSGMT），用於指定應該刪除cookie的準確時間。所以，cookie可在瀏覽器關閉後依然保存在用戶的機器上。若是你設置的失效日期是個之前的時間，則cookie會被馬上刪除。
安全標誌：指定後，cookie只有在使用SSL鏈接的時候才發送到服務器。例如，cookie信息只能發送給 https://www.wrox.com，而http://www.wrox.com的請求則不能發送 cookie。

cookie的應用場景

簡單來講，Cookie就是服務器暫存放在你的電腦裏的資料（.txt格式的文本文件），好讓服務器用來辨認你的計算機。當你在瀏覽網站的時候，Web服務器會先送一小小資料放在你的計算機上，Cookie 會把你在網站上所打的文字或是一些選擇都記錄下來。當下次你再訪問同一個網站，Web服務器會先看看有沒有它上次留下的Cookie資料，有的話，就會依據Cookie裏的內容來判斷使用者，送出特定的網頁內容給你。
網站能夠利用cookie跟蹤統計用戶訪問該網站的習慣，好比什麼時間訪問，訪問了哪些頁面，在每一個網頁的停留時間等。利用這些信息，一方面是能夠爲用戶提供個性化的服務，另外一方面，也能夠做爲了解全部用戶行爲的工具，對於網站經營策略的改進有必定參考價值。
目前Cookie最普遍的是記錄用戶登陸信息，這樣下次訪問時能夠不須要輸入本身的用戶名、密碼了——固然這種方便也存在用戶信息泄密的問題，尤爲在多個用戶共用一臺電腦時很容易出現這樣的問題。

設置／修改 `cookie`

cookie的原生的API，須要咱們本身進行封裝

//直接複製 【直接複製不是覆蓋，而是追加】
document.cookie = 'name=value;'

//封裝setCookie方法
//setCookie 首先對name和value進行編碼
function setCookie(name,value,expires,path,domain,secure){

    var cookie = encodeURIComponent(name)+ '=' +encodeURIComponent(value);
    
    //注意分號後面要有空格
    //後面的4個參數是可選的，因此用if判斷並追加
     
    if(expires){
        cookie +='; expires='+expires.toGMTString();
    }
    if(path){
        cookie += '; path='+path;
    }
    if(domain){
        cookie += '; domain='+domain;
    }
    if(secure){
        cookie += '; secure='+secure;
    }
    document.cookie = cookie;
}

刪除cookie

輸入參數爲name、path、domain 這3個是惟一標識cookie的,將max-age設置爲0，就能夠當即刪除了.

function remove(name,domain,path){
    document.cookie = 'name='+name
                    +'; domain='+domain
                    +'; path='+path
                    +'; max-age=0';
}

cookie缺點

Cookie數量和長度的限制。IE6或更低版本每一個domian下最多20個cookie，IE7和以後的版本最多能夠有 50個cookie，Firefox最多50個cookie，chrome和Safari沒有作硬性限制，每一個cookie長度不能超過4KB，不然會被截掉。
IE和Opera 會清理近期最少使用的cookie，Firefox會隨機清理cookie。這就致使不能永久儲存信息。
安全性問題。若是cookie被人攔截了，那人就能夠取得全部的session信息。即便加密也與事無補，由於攔截者並不須要知道cookie的意義，他只要原樣轉發cookie就能夠達到目的了。
而且每次你請求一個新的頁面的時候，cookie只要知足做用域和做用路徑，Cookie都會被髮送過去，這樣無形中浪費了帶寬。

本地儲存

Web Storage是爲了在本地「存儲」數據而生。html5中的 Web Storage 包括了兩種存儲方式：sessionStorage和localStorage

localStorage && sessionStorage

只要有效期和做用域，瀏覽器每次訪問的時候都會將Storage載入到內存裏

localStorage用於持久化的本地存儲，除非主動刪除數據，不然數據是永遠不會過時的。
sessionStorage用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問而且當會話結束後數據也隨之銷燬。所以sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。也就是說只要這個瀏覽器窗口沒有關閉，即便刷新頁面或進入同源另外一頁面，數據仍然存在。關閉窗口後，sessionStorage即被銷燬
localStorage也受同源策略的限制。
localStorage和sessionStorage都具備相同的操做方法，如setItem,getItem,removeItem,clear等方法，不像cookie須要前端開發者本身封裝setCookie，getCookie。

localStorage應用場景

localStorage能夠用於存儲該瀏覽器對該頁面的訪問次數，固然，若是換個瀏覽器，這個次數就從新開始計數了。還能夠用來存儲一些固定不變的頁面信息，這樣就不須要每次都從新加載了，這個值也能夠進行覆蓋。

訪問這個頁面的時候，script 腳本會自動運行，localStorage.pagecount就會 ++ 了，從而達到統計頁面訪問次數的目的。

<!DOCTYPE HTML>
<html>
<body>

<script type="text/javascript">

if (localStorage.pagecount){
    localStorage.pagecount=Number(localStorage.pagecount) +1;
}
else{
    localStorage.pagecount=1;
}

document.write("Visits: " + localStorage.pagecount + " time(s).");

</script> 

<p>刷新頁面會看到計數器在增加。</p>

<p>請關閉瀏覽器窗口，而後再試一次，計數器會繼續計數。</p>

</body>
</html>

sessionStorage應用場景

使用 sessionStorage 進行頁面傳值

//有時會有這樣的需求，咱們從A頁面獲取的數據，須要在B頁面發送給後端，這時就須要咱們將數據從A頁面傳遞到B頁面。

//A頁面
//首先檢測Storage
if (typeof(Storage) !== "undefined") {
    sessionStorage.'name'=value;
} else {
    sessionStorage.name = '';
}


//B頁面
if (typeof(Storage) !== "undefined") {
    var B_name = sessionStorage.name;
    }

//注意，若是要儲存的數據對象、數組
//那麼在儲存以前，用JSON.stringify將數據轉換爲字符串
//讀取以後，再用JSON.parse轉換爲對象、數組

//存儲
var obj = {name:"xiaoxiong",age:25};
var arr = [1,2,3,4];
window.sessionStorage.obj = JSON.stringify(obj);
window.sessionStorage.arr = JSON.stringify(arr);

//讀取
var OBJ = window.sessionStorage.obj;//"{"name":"xiaoxiong","age":25}"
JSON.parse(OBJ);//Object {name: "xiaoxiong", age: 25}

var ARR = window.sessionStorage.arr;//"[1,2,3,4]"
JSON.parse(ARR);//(4) [1, 2, 3, 4]

總結一下：cookie數量和長度都有限制，Web Storage解決了這樣的限制，且localStorage作到了永久儲存。可是Cookie也是不能夠或缺的：Cookie的做用是與服務器進行交互，做爲HTTP規範的一部分而存在，而Web Storage僅僅是爲了在本地「存儲」數據而生。