cookies、sessionStorage和localStorage解釋及區別

cookies、sessionStorage和localStorage解釋及區別

在瀏覽器查看

HTML4的本地存儲 cookie

瀏覽器的緩存機制提供了可以將用戶數據存儲在客戶端上的方式，可以利用cookie,session等跟服務端進行數據交互。

一、cookie和session

cookie和session都是用來跟蹤瀏覽器用戶身份的會話方式。

區別：

1、保持狀態：cookie保存在瀏覽器端，session保存在服務器端

2、使用方式：

（1）cookie機制：如果不在瀏覽器中設置過期時間，cookie被保存在內存中，生命週期隨瀏覽器的關閉而結束，這種cookie簡稱會話cookie。如果在瀏覽器中設置了cookie的過期時間，cookie被保存在硬盤中，關閉瀏覽器後，cookie數據仍然存在，直到過期時間結束才消失。

     Cookie是服務器發給客戶端的特殊信息，cookie是以文本的方式保存在客戶端，每次請求時都帶上它

（2）session機制：當服務器收到請求需要創建session對象時，首先會檢查客戶端請求中是否包含sessionid。如果有sessionid，服務器將根據該id返回對應session對象。如果客戶端請求中沒有sessionid，服務器會創建新的session對象，並把sessionid在本次響應中返回給客戶端。通常使用cookie方式存儲sessionid到客戶端，在交互中瀏覽器按照規則將sessionid發送給服務器。如果用戶禁用cookie，則要使用URL重寫，可以通過response.encodeURL(url) 進行實現；API對encodeURL的結束爲，當瀏覽器支持Cookie時，url不做任何處理；當瀏覽器不支持Cookie的時候，將會重寫URL將SessionID拼接到訪問地址後。

3、存儲內容：cookie只能保存字符串類型，以文本的方式；session通過類似與Hashtable的數據結構來保存，能支持任何類型的對象(session中可含有多個對象)

4、存儲的大小：cookie：單個cookie保存的數據不能超過4kb；session大小沒有限制。

5、安全性：cookie：針對cookie所存在的攻擊：Cookie欺騙，Cookie截獲；session的安全性大於cookie。

　　　　　　原因如下：（1）sessionID存儲在cookie中，若要攻破session首先要攻破cookie；

　　　　　　　　　　　（2）sessionID是要有人登錄，或者啓動session_start纔會有，所以攻破cookie也不一定能得到sessionID；

　　　　　　　　　　　（3）第二次啓動session_start後，前一次的sessionID就是失效了，session過期後，sessionID也隨之失效。

　　　　　　　　　　　（4）sessionID是加密的

　　　　　　　　　　　（5）綜上所述，攻擊者必須在短時間內攻破加密的sessionID，這很難。

6、應用場景：

cookie：（1）判斷用戶是否登陸過網站，以便下次登錄時能夠實現自動登錄（或者記住密碼）。如果我們刪除cookie，則每次登錄必須從新填寫登錄的相關信息。

　　　　（2）保存上次登錄的時間等信息。

　　　　（3）保存上次查看的頁面

　　　　（4）瀏覽計數

session：Session用於保存每個用戶的專用信息，變量的值保存在服務器端，通過SessionID來區分不同的客戶。

　　（1）網上商城中的購物車

　　（2）保存用戶登錄信息

　　（3）將某些數據放入session中，供同一用戶的不同頁面使用

　　（4）防止用戶非法登錄

 7、缺點：cookie：（1）大小受限

　　　　　　　　（2）用戶可以操作（禁用）cookie，使功能受限

　　　　　　　　（3）安全性較低

　　　　　　　　（4）有些狀態不可能保存在客戶端。

　　　　　　　　（5）每次訪問都要傳送cookie給服務器，浪費帶寬。

　　　　　　　　（6）cookie數據有路徑（path）的概念，可以限制cookie只屬於某個路徑下。

 　　　　session：（1）Session保存的東西越多，就越佔用服務器內存，對於用戶在線人數較多的網站，服務器的內存壓力會比較大。

　　　　　　　　（2）依賴於cookie（sessionID保存在cookie），如果禁用cookie，則要使用URL重寫，不安全

　　　　　　　　（3）創建Session變量有很大的隨意性，可隨時調用，不需要開發者做精確地處理，所以，過度使用session變量將會導致代碼不可讀而且不好維護。

 

 

 HTML5的本地存儲

解釋一

HTML5中與本地存儲相關的兩個重要內容：Web Storage與本地數據庫。其中，Web Storage存儲機制是對HTML4中cookie存儲機制的一個改善。由於cookie存儲機制有很多缺點，HTML5不再使用它，轉而使用改良後的Web Storage存儲機制。本地數據庫是HTML5中新增的一個功能，使用它可以在客戶端本地建立一個數據庫，原本必須保存在服務器端數據庫中的內容現在可以直接保存在客戶端本地了，這大大減輕了服務器端的負擔，同時也加快了訪問數據的速度。

本文主要來講解Web Storage

我們知道，在HTML4中可以使用cookie在客戶端保存諸如用戶名等簡單的用戶信息，但是，通過長期的使用，你會發現，用cookie存儲永久數據存在以下幾個問題：

1.大小：cookie的大小被限制在4KB。

2.帶寬：cookie是隨HTTP事務一起被髮送的，因此會浪費一部分發送cookie時使用的帶寬。

3.複雜性：要正確的操縱cookie是很困難的。

針對這些問題，在HTML5中，重新提供了一種在客戶端本地保存數據的功能，它就是Web Storage。

具體來說，Web Storage又分爲兩種：

1.sessionStorage：將數據保存在session對象中。所謂session，是指用戶在瀏覽某個網站時，從進入網站到瀏覽器關閉所經過的這段時間，也就是用戶瀏覽這個網站所花費的時間。session對象可以用來保存在這段時間內所要求保存的任何數據。

2.localStorage：將數據保存在客戶端本地的硬件設備(通常指硬盤，也可以是其他硬件設備)中，即使瀏覽器被關閉了，該數據仍然存在，下次打開瀏覽器訪問網站時仍然可以繼續使用。

這兩者的區別在於，sessionStorage爲臨時保存，而localStorage爲永久保存。

到目前爲止，Firefox3.6以上、Chrome6以上、Safari 5以上、Pera10.50以上、IE8以上版本的瀏覽器支持sessionStorage與localStorage的使用。

 

解釋二

WebStorage的目的是克服由cookie所帶來的一些限制，當數據需要被嚴格控制在客戶端時，不需要持續的將數據發回服務器。

WebStorage兩個主要目標：（1）提供一種在cookie之外存儲會話數據的路徑。（2）提供一種存儲大量可以跨會話存在的數據的機制。

HTML5的WebStorage提供了兩種API：localStorage（本地存儲）和sessionStorage（會話存儲）。

1、生命週期：localStorage:localStorage的生命週期是永久的，關閉頁面或瀏覽器之後localStorage中的數據也不會消失。localStorage除非主動刪除數據，否則數據永遠不會消失。

　　　　　　  sessionStorage的生命週期是在僅在當前會話下有效。sessionStorage引入了一個“瀏覽器窗口”的概念，sessionStorage是在同源的窗口中始終存在的數據。只要這個瀏覽器窗口沒有關閉，即使刷新頁面或者進入同源另一個頁面，數據依然存在。但是sessionStorage在關閉了瀏覽器窗口後就會被銷燬。同時獨立的打開同一個窗口同一個頁面，sessionStorage也是不一樣的。

2、存儲大小：localStorage和sessionStorage的存儲數據大小一般都是：5MB

3、存儲位置：localStorage和sessionStorage都保存在客戶端，不與服務器進行交互通信。

4、存儲內容類型：localStorage和sessionStorage只能存儲字符串類型，對於複雜的對象可以使用ECMAScript提供的JSON對象的stringify和parse來處理

5、獲取方式：localStorage：window.localStorage;；sessionStorage：window.sessionStorage;。

6、應用場景：localStoragese：常用於長期登錄（+判斷用戶是否已登錄），適合長期保存在本地的數據。sessionStorage：敏感賬號一次性登錄；

WebStorage的優點：

（1）存儲空間更大：cookie爲4KB，而WebStorage是5MB；

（2）節省網絡流量：WebStorage不會傳送到服務器，存儲在本地的數據可以直接獲取，也不會像cookie一樣美詞請求都會傳送到服務器，所以減少了客戶端和服務器端的交互，節省了網絡流量；

（3）對於那種只需要在用戶瀏覽一組頁面期間保存而關閉瀏覽器後就可以丟棄的數據，sessionStorage會非常方便；

（4）快速顯示：有的數據存儲在WebStorage上，再加上瀏覽器本身的緩存。獲取數據時可以從本地獲取會比從服務器端獲取快得多，所以速度更快；

（5）安全性：WebStorage不會隨着HTTP header發送到服務器端，所以安全性相對於cookie來說比較高一些，不會擔心截獲，但是仍然存在僞造問題；

（6）WebStorage提供了一些方法，數據操作比cookie方便；

　　　　setItem (key, value) ——  保存數據，以鍵值對的方式儲存信息。

      　　 getItem (key) ——  獲取數據，將鍵值傳入，即可獲取到對應的value值。

        　　removeItem (key) ——  刪除單個數據，根據鍵值移除對應的信息。

        　　clear () ——  刪除所有的數據

        　　key (index) —— 獲取某個索引的key

 

cookie 、sessionStorage與localStorage的區別

 

sessionStorage與localStorage的使用示例。

首先，準備一個用來保存數據和顯示數據的網頁

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>Web Storage 示例</title>
    </head>
    <body>
    <h1>Web Storage 示例</h1>
    <p id="msg"></p>
    <input type="text" id="input" />
    <input type="button" value="保存數據" onclick="saveStorage('input');" />
    <input type="button" value="讀取數據" onclick="loadStorage('msg');" />
    </body>
</html>

單擊"保存數據"按鈕時調用saveStorage方法保存數據，單擊"讀取數據"按鈕時調用loadStorage方法調用數據，這兩個方法均在腳本文件script.js中，如下：

//sessionStorage 示例  (保存一個會話週期:從打開瀏覽器——到關閉瀏覽器窗口)
function saveStorage(id){
    var target=document.getElementById(id);
    var str=target.value;
    sessionStorage.setItem("message",str);
    //或者sessionStorage.message=str;
}
function loadStorage(id){
    var target=document.getElementById(id);
    var msg=sessionStorage.getItem("message");
    //或者var msg=sessionStorage.message;
    target.innerHTML=msg;
}
//localStorage 示例(可永久保存)    
function saveStorage(id){
    var target=document.getElementById(id);
    var str=target.value;
    localStorage.setItem("message",str);
    //或者localStorage.message=str;
}
function loadStorage(id){
    var target=document.getElementById("msg");
    var msg=localStorage.getItem("message");
    //或者var msg=localStorage.message;
    target.innerHTML=msg;
}

這個腳本文件分別使用了sessionStorage與localStorage兩種方法。這兩種方法都是當用戶在input文本框中輸入內容後單擊"保存數據"按鈕保存數據，單擊"讀取數據"按鈕讀取保存後的數據。但是兩種方法對數據的處理方式不一樣，在使用sessionStorage方法時，如果關閉了瀏覽器，這個數據就丟失了，下一次打開瀏覽器單擊"讀取數據"按鈕時，讀取不到任何數據。在使用localStorage方法時，即使瀏覽器關閉了，下次打開瀏覽器時仍然能夠讀取保存的數據。不過，數據保存是按不同的瀏覽器分別進行保存的，也就是說，打開別的瀏覽器是讀取不到在這個瀏覽器中保存的數據的。

下面具體看一下讀寫數據時使用的基本方法

(1)sessionStorage

保存數據的方法：

sessionStorage.setItem("key","value");
//或者寫成
sessionStorage.key="value";

讀取數據的方法：

變量=sessionStorage.getItem("key");
//或者寫成
變量=sessionStorage.key;

(2)localStorage

保存數據的方法：

localStorage.setItem("key","value");
//或者寫成
localStorage.key="value";

讀取數據的方法：

變量=localStorage.getItem("key");
//或者寫成
變量=localStorage.key;

在保存數據時，若使用sessionStorage讀取或保存數據，則使用sessionStorage對象並調用該對象的讀寫方法；若使用localStorage讀取或保存數據，則使用localStorage對象並調用該對象的讀寫方法。
在進行讀寫時，不管是哪個對象，都可以通過該對象的getItem方法來讀取數據，也可以該對象的自定義屬性值讀取數據；可以通過該對象的setItem方法保存數據，也可以通過該對象的自定義屬性值保存數據。保存數據時按“鍵名/鍵值”的形式進行保存。當通過該對象的getItem方法讀取數據時，將參數指定爲鍵名，該方法返回鍵值；當通過該對象的自定義屬性值讀取數據時，可以將該對象的某個自定義屬性名作爲鍵名，訪問該自定義屬性的屬性值即可得到鍵值；當通過該對象的setItem方法保存數據時，將第一個參數指定爲鍵名，將第二個參數指定爲鍵值；當通過該對象的自定義屬性值保存數據時，可以將該對象的某個自定義屬性名作爲鍵名，然後直接將該自定義屬性值設置爲鍵值。

在保存數據時不允許重複保存相同的鍵名。保存後可以修改鍵值，但不允許修改鍵名(只能重新取鍵名，然後再保存鍵值)。

最後，這個示例在瀏覽器中的運行結果如下：

文章來源：https://blog.csdn.net/xiaozhi_2016/article/details/52416093  

                  https://www.cnblogs.com/cencenyue/p/7604651.html