【前端基礎知識】本地存儲localStorage sessionStorage 以及 session和cookie的對比和使用

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

1.驗證當前服務中繼續請求數據時，哪些緩存數據會隨着發往服務器？

　　只有cookie中設置的緩存數據會發送到服務器端

2. 強調幾點：

　　(1) cookie 全部瀏覽器都支持

　　　 sessionStorage:(h5) 關閉瀏覽器時清除

　　　 localStorage:(h5) 手動清緩存

　　   （這兩種更像純粹的存儲緩存的對象）

　   (2) cookie 能夠被禁用，因爲cookie會緩存到本地指定的一個物理文件中，存在被用戶刪除的風險

　　　 cookie是存儲在document上的一個屬性，對該屬性的操做，就是對用戶數據的存儲和讀取

3. 先說一下cookie  和 session 的不一樣之處：

• 保存方式：
  session 保存在服務器端, 客戶端不知道其中的信息
  cookie 保存在客戶端，服務器能夠知道其中的信息，保存的是字符串
  
• 存儲大小：
  cookie 不超過4KB
  session無大小限制
• 安全性：
  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，這很難。

• 存儲內容：
         cookie只能保存字符串類型，以文本的方式；
         session經過相似與Hashtable的數據結構來保存，能支持任何類型的對象(session中可含有多個對象) session中保存的是對象，不區分路徑，同一個用戶在訪問一個網站期間，全部的session在任何一個地方均可以訪問到

• 應用場景：
  cookie:

• • 判斷用戶是否登錄過網站，以便下次登陸時可以實現自動登陸（或者記住密碼）。若是咱們刪除cookie，則每次登陸必須重新填寫登陸的相關信息。
  • 保存上次登陸的時間等信息。
  • 保存上次查看的頁面
  • 瀏覽計數

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

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

　　（2）保存用戶登陸信息

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

　　（4）防止用戶非法登陸 

• 缺點：
  cookie：
  
  • 大小受限
  • 用戶能夠操做（禁用）cookie，使功能受限
  • 安全性較低
  • 有些狀態不可能保存在客戶端。
  • 每次訪問都要傳送cookie給服務器，浪費帶寬。
  • cookie數據有路徑（path）的概念，能夠限制cookie只屬於某個路徑下。

session：

• • Session保存的東西越多，就越佔用服務器內存，對於用戶在線人數較多的網站，服務器的內存壓力會比較大。
  • 依賴於cookie（sessionID保存在cookie），若是禁用cookie，則要使用URL重寫，不安全
  • 建立Session變量有很大的隨意性，可隨時調用，不須要開發者作精確地處理，因此，過分使用session變量將會致使代碼不可讀並且很差維護。

4. 那到底什麼是 cookie機制 和 sessio機制

首先HTTP是無狀態的協議, 數據交換完畢以後，客戶端與服務器端之間的鏈接就會關閉, 再次交換就要建議新的連接, 可是咱們有時候就須要來彌補HTTP的這個不足之處

cookie機制：

　　客戶端請求服務器端的時候, 服務器端如何記錄用戶狀態，就要使用response，向客戶端發送一個cookie，客戶端就會把cookie保存起來，瀏覽器再次請求服務端時就會把網址和cookie一塊兒發給服務器，服務器檢查cookie來辨別用戶身份，因此cookie功能須要瀏覽器的支持，也就是說你不能禁用它

Session機制：

 　　客戶端訪問服務器的時候服務器就會以某種形式保存下來, 服務端會有一個SESSIONID, 當再次訪問時就會在服務器端查找, 若是找不到對應的sessionid, 那麼就會建立一個session  並生成一個sessionid, sessionid會在本次響應中返回給客戶端保存, 就是個不會重複的字符串, 也就是說你再請求服務端時, 首先要檢查請求裏是否有這個id, 而客戶端保存sessionid並傳去服務端的這個過程, 一般使用cookie來保存和發送

 

5. 本地存儲 localStorage sessionStorage
　　WebStorage的目的是克服由cookie所帶來的一些限制，當數據須要被嚴格控制在客戶端時，不須要持續的將數據發回服務器。
     

　　本地存儲能帶來什麼？

　　　　提供一種在cookie以外存儲會話數據的路徑

             提供一種存儲大量能夠跨會話存在的數據的機制

　　

　　那麼如今來對比一下這兩個之間的差別：

　　　　一、生命週期：

　　　　localStorage的生命週期是永久的，關閉頁面或瀏覽器以後localStorage中的數據也不會消失。
　　　　localStorage除非主動刪除數據，不然數據永遠不會消失。

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

　　　　二、存儲大小：localStorage和sessionStorage的存儲數據大小通常都是：5MB

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

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

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

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

　　

　　本地存儲的優勢有哪些？

• • 存儲空間更大：cookie爲4KB，而WebStorage是5MB；
  • 節省網絡流量：WebStorage不會傳送到服務器，存儲在本地的數據能夠直接獲取，也不會像cookie同樣美詞請求都會傳送到服務器，因此減小了客戶端和服務器端的交互，節省了網絡流量；
  • 對於那種只須要在用戶瀏覽一組頁面期間保存而關閉瀏覽器後就能夠丟棄的數據，sessionStorage會很是方便；
  • 快速顯示：有的數據存儲在WebStorage上，再加上瀏覽器自己的緩存。獲取數據時能夠從本地獲取會比從服務器端獲取快得多，因此速度更快；
  • 安全性：WebStorage不會隨着HTTP header發送到服務器端，因此安全性相對於cookie來講比較高一些，不會擔憂截獲，可是仍然存在僞造問題；
  • WebStorage提供了一些方法，數據操做比cookie方便；

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

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

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

        clear () ——  刪除全部的數據

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

 6.cookie 操做

//設置cookie 

//存儲操做須要聲明Key , value , expires , 指定緩存數據所在路徑

//當不設置過時時間時，數據緩存在內存中，當設置過時時間是將來的一個時間點，則存在磁盤中，再次訪問頁面只要時間沒到，就能夠繼續訪問

function setCookie(key, value, expires, path){
     if(!path) {
        path = "/"  
     }
     if(expires)  {
        var date = new Date();
        date.setDate(date.getDate() + expires)
        document.cookie = key + "=" + escape(value) + ";expires="+data.toUTCString() + ";path=" + path;
     }else{
        document.cookie = key + "=" +escape(value) + ";path=" +path;
     }

}

 

//獲取cookie

//頁面1 ： http://localhost:8080/path/review/modules/a.jsp

//頁面2： http://localhost:8080/path/review/modules/b.jsp

//頁面3 ： http://localhost:8080/path/review/modules/html/c.jsp

//頁面4 ： http://localhost:8080/path/index.jsp

//當緩存數據寫到路徑1時 ，該緩存能夠在頁面123讀到，而4不能夠，cookie可跨多個網頁，不可跨域名

//設置兩次cookie path相同會覆蓋

//對一個key值作覆蓋，要注意覆蓋路徑和已緩存的key值路徑是否一致

function getCookie(name){
    var cookies = document.cookie;
    var cookieArr = cookies.split(";");
    for( var i = 0 ; i < cookieArr .length ; i++){
       var cook = cookieArr[i];
       var cookArr = cook.split("=");
       if(cookArr[0] == name){
           return unescape(cookArr[i])
       }
    }
   return null;
}

// 刪除cookie

function removeCookie(name){
    var date = new Date();
    date.setDate(date.getDate() - 10);
    document.cookie = name + "=123;expires=" +date.toUTCString();

}

7. sessionStorage操做

頁面關閉清除，有些瀏覽器會設置上限5M

　　API :

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

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

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

　　window.sessionStorage.setItem("name", "Auyuer");

　　window.sessionStorage.getItem("name");

　　window.sessionStorage.removeItem("name");

8.localStorage操做

緩存數據是和服務器綁定的，不一樣服務器之間不能夠相互讀取

手動緩存清除時可清除，有些瀏覽器會設置上限5M

（使用同sessionStorage）