前端本地存儲——cookie,localStorage,sessionStorage

一，關於瀏覽器本地存儲

　　爲何要有本地存儲呢？舉例：

        　   1.在先後端進行數據交互時，服務器沒法知道多個請求是否來自同一個瀏覽器，以前的解決辦法是在請求中插入一些參數，這須要使用包含參數的隱藏的表單，或者做爲URL參數的一部分傳遞。這兩個　　　　　解決方案都須要手動操做，容易出錯。

　　　　2.通常在登陸系統中，用戶登陸一次之後，若是沒有本地存儲，下一次登陸須要從新輸入用戶名和密碼，用戶體驗繁瑣。

二，cookie

　　cookie是存儲於用戶的計算機的變量，當用戶訪問了某個網站的時候，咱們能夠經過cookie向訪問者的電腦存儲數據，下一次訪問該網站時就會重新cookie中獲取數據。（二次登陸時無需輸入用戶名密碼）

　　具體如何工做？

　　當網頁發送http請求時，瀏覽器會先檢查是否有相應的cookie,若是有則自動添加在request header 的cookie字段中（若有該網站曾經登陸過得用戶名密碼則直接自動填入）。

　　使用javascript操做cookie:

//1.建立cookie
  function setCookie(name, value, expireDays) {
    let exdate = new Date();
    exdate.setDate(exdate.getDate() + expireDays);
    document.cookie = name + '=' + escape(value) + ((expireDays === null) ? '' : ';expires=' + exdate.toGMTString())
    console.log('cookie=', document, document.cookie);
    //toGMTString()方法根據格林威治時間把Date轉化爲字符串
  }
  setCookie('chenke', 'ckck', 2)

/*
    escape()函數對字符串進行編碼，這樣就能夠在全部的計算機上讀取該字符串
    console.log((escape("?!=()#%&"),escape("Visit W3School!"))
    Visit%20W3School%21    %3F%21%3D%28%29%23%25%26
*/

//讀取，經過document.cookie來獲取當前網站下的cookei的時候，獲得的字符串形式的值，包含了當前網站下全部的cookie,它會吧全部的cookie經過一個分號+空格的形式串聯起來，例如：name=chenke;job=coding.

function getCookie(name){
   if(document.cookie.length>0){
     let start=document.cookie.indexOf(name+'=')
     if(start!==-1){
        start=startTag+name.length+1;  
        end=document.cookie.indexOf(';',start)
        if(end===-1){
         end=document.cookie.length;
      }
       return unescape(document.cookie.substring(start,end))
    }  
     return ''
  }
}        
let name=getCookie('name')
console.log(name);

      使用jequery:

//設置cookie
$.cookie('name','nihao')    //存儲name='nihao'到cookie中
$.cookie('name','nihao',{expires:5,path:'/',secure:false,raw:false}) 
//有效期5天，有效路徑爲跟目錄，secure:是否使用安全協議HTTPS,raw:讀取和寫入自動進行編碼解碼

//讀取    
$.cookie('name')   //cookie存在，‘nihao’
$.cookie('password')     //cookie不存在，null

//刪除
$cookie('name',null);

      注意：

　　　　1.不一樣的瀏覽器存放cookie的位置不同，不能通用；另外cookie的存儲以域名形式區分，不一樣的域下存儲的cookie是獨立的（可設置cookie生效的域）。

　　　　2.一個域名下存放的cookie的個數是有限制的，不一樣的瀏覽器存放的個數不同,通常爲20個。每一個cookie的內容大小也是有限制的，不一樣瀏覽器不一樣，通常爲4kb

　　　　3.cookie也能夠設置過時的時間，默認是會話結束的時候，當時間到期，自動銷燬

三，localStorage與sessionStorage

        在HTML5中新加了一個特性localStorage。這個特性主要用來作本地存儲，解決了cookie存儲的空間不足問題（cookie存儲空間爲4k），localStorage通常存儲空間爲5M大小，不一樣瀏覽器有所不一樣。webStorage還包括sessionStorage,二者都是調用Storage對象設置，獲取，和刪除進行控制存儲的數據。二者存儲的數據只能是字符串類型的鍵值對。

//localStorage,sessionStorage
  console.log(window.localStorage);
  console.log(window.sessionStorage);
  //寫入
  localStorage.setItem('username', 'chenke')
  sessionStorage.setItem('password', '123456')
  //讀取
  const username = localStorage.getItem('username')
  const password = sessionStorage.getItem('password')
  console.log('username=', username);
  console.log('password=', password);
  //刪除
  localStorage.removeItem('username');
  sessionStorage.removeItem('password');
  console.log(localStorage.getItem('username'), '---', sessionStorage.getItem('password'));

  //刪除全部key/value
  localStorage.clear();
  sessionStorage.clear();

注意：

 　   1.localStorage永久存儲，在瀏覽器關閉後，從新打開後數據任然存在，須要手動刪除，否則一直存在(若是想設置存儲時間能夠自行封裝類處理)。

　　2.sessionStorage：在瀏覽器頁面會話期間可用（包含頁面從新加載和恢復），會話結束就被刪除（統一窗口也就統一瀏覽器標籤頁下，即頁面關閉自動銷燬）

　　3.cookie的數據會在每一次發送http請求的時候，同時發送給服務器。而localStorage, sessionStorarge不會。

　　4.IE8以上版本才支持localStorage這個屬性

　　5.通常咱們將JSON數據存入到localStorage中，而localStorage接收的是字符串，故寫入的時候能夠用JSON.stringfy()方法將JSON轉換爲JSON字符串。讀取的時候能夠用JSON.parse()方法，將JSON字符串轉化爲JSON對象。