一、Web本地儲存

【含義說明】

localStorage（長期儲存）：瀏覽器關閉後，資料一直存在，不會被清除，即沒有時間限制。

seesionStorage（臨時儲存）：針對每一個session進行資料儲存。只有當瀏覽器關閉視窗後，資料才會被清除。

注意：本地儲存都是不能跨域訪問的

【使用方法】

1. 儲存資料到本地

    const info = {
        name: 'Lee',
        age: 20,
        id: '001'
    };
    sessionStorage.setItem('key', JSON.stringify(info));
    localStorage.setItem('key'
 
, JSON.stringify(info));

2. 從本地儲存獲取資料

    var data1 = JSON.parse(sessionStorage.getItem('key'));
    var data2 = JSON.parse(localStorage.getItem('key'));

3. 本地儲存中刪除某個儲存的資料

    sessionStorage.removeItem('key');
    localStorage.removeItem('key');

4. 刪除所有儲存的資料

    sessionStorage.clear();
    localStorage.clear();
 

5. 監聽本地儲存的變化

Storage 發生變化（增加、更新、刪除）時的 觸發，同一個頁面發生的改變不會觸發，只會監聽同一域名下其他頁面改變 Storage

    window.addEventListener('storage', function (e) {
        console.log('key', e.key);
        console.log('oldValue', e.oldValue);
        console.log('newValue', e.newValue);
        console.log('url', e.url);
    })

二、cookie和session 

【定義說明】

Cookie：存在於客戶端即瀏覽器，可以儲存使用者的賬號密碼，用於識別使用者，當瀏覽器雨伺服器互動時，會同時傳送cookie。

         1. 有兩種存在方式：1）永續性cookie（persistent cookie），設定了儲存時間，以檔案的形式儲存在使用者硬碟；2）會話cookie（session cookie），沒有設定儲存時間，瀏覽器關閉前消失，儲存在記憶體，目前和伺服器互動的時候使用的都是會話cookie

         2. Cookie其實還可以用在一些方便使用者的場景下，設想你某次登陸過一個網站，下次登入的時候不想再次輸入賬號了，怎麼辦？這個資訊可以寫到Cookie裡面，訪問網站的時候，網站頁面的指令碼可以讀取這個資訊，就自動幫你把使用者名稱給填了，能夠方便一下使用者。這也是Cookie名稱的由來，給使用者的一點甜頭。

Session：存在於伺服器端，用於跟蹤使用者會話。每一個網站訪客都會被分配一個唯一的識別符號，即會話ID（session_ID)。可以儲存在檔案、資料庫、記憶體中。

        1. 由於HTTP協議是無狀態的協議，所以服務端需要記錄使用者的狀態時，就需要用某種機制來識具體的使用者，這個機制就是Session。比如購物車，當你點選下單按鈕時，由於HTTP協議無狀態，所以並不知道是哪個使用者操作的，這個時候服務端要為特定的使用者建立特定的Session，用於標識這個使用者，並且跟蹤使用者，這樣才知道該使用者的購物車裡面有幾本書。這個Session是儲存在服務端的，有一個唯一標識。在服務端儲存Session的方法很多，記憶體、資料庫、檔案都有。叢集的時候也要考慮Session的轉移，在大型的網站，一般會有專門的Session伺服器叢集，用來儲存使用者會話，這個時候 Session 資訊都是放在記憶體的，使用一些快取服務比如Memcached之類的來放 Session。

         2. 思考一下服務端如何識別特定的客戶？這個時候Cookie就登場了。每次HTTP請求的時候，客戶端都會發送相應的Cookie資訊到服務端。實際上大多數的應用都是用 Cookie 來實現Session跟蹤的，第一次建立Session的時候，服務端會在HTTP協議中告訴客戶端，需要在 Cookie 裡面記錄一個Session ID，以後每次請求把這個會話ID傳送到伺服器，我就知道你是誰了。

【聯合工作】

         當程式需要為某個客戶端的請求建立一個session時，伺服器首先檢查這個客戶端的請求裡是否已包含了一個session標識(稱為session_ID)，如果已包含則說明以前已經為此客戶端建立過session，伺服器就按照session_ID把這個session檢索出來使用(檢索不到，會新建一個)，如果客戶端請求不包含session_ID，則會為此客戶端建立一個session並且生成一個與此session相關聯的session_ID，session_ID的值應該是一個既不會重複，又不容易被找到規律以仿造的字串，這個session_ID將被在本次響應 中返回給客戶端儲存。客戶端儲存這個session_ID的方式可以採用cookie，這樣在互動過程中瀏覽器可以自動的按照規則把這個標識傳送給伺服器。如果客戶端的瀏覽器禁用了 Cookie 怎麼辦？一般這種情況下，會使用一種叫做URL重寫的技術來進行會話跟蹤，即每次HTTP互動，URL後面都會被附加上一個諸如 sid=xxxxx 這樣的引數，服務端據此來識別使用者。

【cookie的刪除修改】

          Cookie並不提供修改、刪除操作。如果要修改某個Cookie，只需要新建一個同名的Cookie，新增到response中覆蓋原來的Cookie。如果要刪除某個Cookie，只需要新建一個同名的Cookie，並將maxAge設定為0，並新增到response中覆蓋原來的Cookie。注意是0而不是負數。如果maxAge為負數，則表示該Cookie僅在本瀏覽器視窗以及本視窗開啟的子視窗內有效，關閉視窗後該Cookie即失效。maxAge為負數的Cookie，為臨時性Cookie，不會被持久化，不會被寫到Cookie檔案中。Cookie資訊儲存在瀏覽器記憶體中，因此關閉瀏覽器該Cookie就消失了。Cookie預設的maxAge值為–1。

        注意：修改、刪除Cookie時，新建的Cookie除value、maxAge之外的所有屬性，例如name、path、domain等，都要與原Cookie完全一樣。否則，瀏覽器將視為兩個不同的Cookie不予覆蓋，導致修改、刪除失敗。

【兩者區別】

1、cookie資料存放在客戶的瀏覽器上，session資料放在伺服器上 
2、cookie不是很安全，別人可以分析存放在本地的cookie並進行cookie欺騙，考慮*到安全應當使用session 
3、session會在一定時間內儲存在伺服器上，當訪問增多，會比較佔用你伺服器的效能，考慮到減輕伺服器效能方面，應當使用cookie 
4、單個cookie儲存的數*據不能超過4K，很多瀏覽器都限制一個站點最多儲存20個cookie 
5、建議將登入資訊等重要資訊存放為session，其他資訊如果需要保留，可以放在cookie中 
6、session儲存在伺服器，客戶端不知道其中的資訊；cookie儲存在客戶端，伺服器能夠知道其中的資訊 
7、session中儲存的是物件，cookie中儲存的是字串 
8、session不能區分路徑，同一個使用者在訪問一個網站期間，所有的session在任何一個地方都可以訪問到，而cookie中如果設定了路徑引數，那麼同一個網站中不同路徑下的cookie互相是訪問不到的