前端戰五渣學JavaScript——前端數據存儲

時間 2019-11-17

原文原文鏈接

提及前端數據存儲，那就不得不提到Cookie、sessionStorage和localStorage，這是咱們接觸到的最熟悉的前端數據存儲的單詞，做爲一個前端開發、前端工程師，這三個單詞用沒用過先無論，但你在學習的時候確定知道。可是最近又看到不少小夥伴不清楚cookie究竟是幹什麼的，而且sessionStorage和localStorage也不知道怎麼用，那我就總結一下啦~javascript

前端數據存儲

咱們都知道，做爲一名前端開發，或多或少在開發的過程當中由於各類各樣的需求，須要在前端存儲一些數據，好比登陸驗證，可能會用到cookie，或者localStorage存儲token，而後請求手動帶上。因此咱們很須要搞清楚前端存儲有哪些方法，以及咱們該如何去使用這些咱們已經司空見慣的單詞（Cookie、sessionStorage和localStorage）😝html

下面是我本身總結的常見前端存儲方式的對比表格，我目前是這麼理解的，若有問題，請大佬們指正：前端

Cookie

HTTP Cookie，一般直接叫作cookie，最初是在客戶端用於存儲會話信息的。該標準要求服務器對任意HTTP請求發送Set-Cookie HTTP頭做爲響應的一部分，其中包含會話信息。 ————————《JavaScript高級程序設計》vue

說的直白一點，通常就是用來登陸驗證，在發送登陸請求的之後，服務端在返回的響應頭中設置Set-Cookie，並設置其值。而且cookie遵循瀏覽器同源策略，在不一樣源的頁面中是訪問不到當前頁面的cookie的。若是能夠的，就能拿到cookie僞造請求進行XSS和CSRF攻擊。java

就像上圖所示，在響應頭中有了Set-Cookie，並設置了服務端返回的相應的值，這個時候咱們在查看當前頁面的Application中的cookie，發現其中已經有了剛纔返回的cookie。會話cookie通常不會存儲在硬盤裏，而是保存在內存中，若是是設置了過時時間，瀏覽器會把cookie保存在硬盤中。 react

就上圖中，咱們能夠看見返回的 Set-Cookie中有時間，因此當前返回的cookie是保存在硬盤中的。 cookie會隨着頁面發送的請求再帶回到服務端，而後服務端判斷cookie的值，進而判斷當前的登陸狀態。 既然咱們剛纔設置的cookie是有有效時間的，因此在有效時間以前，咱們無論怎麼操做頁面（關閉標籤頁或者瀏覽器），咱們只要打開頁面發送請求，就會默認咱們已是登陸狀態，不須要再次登陸。

上圖就是攜帶cookie的請求，這不是前端手動在請求中攜帶上的，是瀏覽器的自主行爲。

Ajax、Axios以及fetch攜帶cookie狀況

剛纔咱們說了，只要服務端在請求回來的響應頭中設置了Set-Cookie的值，服務端就在瀏覽器中種下了cookie，之後的每一個請求都會攜帶上這個cookie，可是也有個別狀況發送的請求是不會默認攜帶cookie。ios

Cors跨域請求和fetch請求默認是不攜帶cookie的git

jQuery中的Ajax請求

咱們無論jQuery中發送的jsonp請求，由於嚴格意義上講，jsonp不算是發送請求後端返回數據的形勢。咱們如今只討論發送的json請求。在相同域下，咱們發送的Ajax請求⬇️github

$.ajax({
  type: 'post',
  url: '/person/detail',
  dataType: 'json',
  data: {
    id: 1
  },
  success: function (res) {},
  error: function(e) {}
})
複製代碼

若是咱們請求的是一個不一樣域下的接口，咱們不考慮反向代理的狀況，由於反向代理理論上仍是訪問相同域的接口。下面是若是咱們使用Cors解決跨域的時候⬇️ajax

$.ajax({
  type: 'post',
  url: '/person/detail',
  dataType: 'json',
  data: {
    id: 1
  },
  xhrFields: {
    withCredentials: true // 若是是Cors解決的跨域，咱們請求接口的域和咱們頁面所在域是不一樣域，因此須要添加這個屬性值
  },
  success: function (res) {},
  error: function(e) {}
})
複製代碼

Axios請求

下面是咱們在vue或者react庫中常常用到一個請求庫——Axios，Axios發送Cors跨域請求，默認也是不會帶上cookie的⬇️

axios({
  method: 'post',
  url: '/person/detail',
  data: {
    id: 1,
  }
});
複製代碼

上面是正常的同域請求，下面咱們來看怎麼發送Cors請求

axios({
  method: 'post',
  url: '/person/detail',
  data: {
    id: 1,
  },
  withCredentials: true, // 設置了這個值，咱們我就能夠發送Cors請求了，這個值默認不設置的話是false
});
複製代碼

fetch請求

fetch是javascript提供的一個比較底層的API，讓咱們能夠方便的發起fetch請求，可是fetch請求如今看來，只是一個底層API，雖然相對於原生Ajax請求方便一些，可是Ajax已經被各類庫封裝的很方便使用了，可fetch就相形見絀了。就咱們如今來看，fetch不只僅是在發送Cors請求的時候不懈怠cookie，而是默認狀況下，fetch什麼狀況都不會從服務端發送或接收任何cookied，咱們先來看正常請求⬇️

fetch('/person/detail', {
  method: 'POST',
  body: JSON.stringify({id: 1}),
  headers: {
    'content-type': 'application/json'
  },
})
複製代碼

上面咱們就發送了一條fetch請求，而後咱們須要請求憑證，須要有cookie怎麼辦呢⬇️

fetch('/person/detail', {
  method: 'POST',
  body: JSON.stringify({id: 1}),
  credentials: 'include', // 強制帶上憑據頭，攜帶上cookie
  headers: {
    'content-type': 'application/json'
  },
})
複製代碼

操做cookie

咱們畢竟這章是講前端的數據存儲，上面說的請求攜帶cookie的方法，只是由於cookie會跟隨請求被攜帶回服務端 ，那咱們如今來看怎麼操做cookie呢，或者拿到cookie的值，可是咱們通常不須要這麼作。

存儲的數據格式

下面是一個cookie的構成，摘自《JavaScript高級程序設計》

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

獲取cookie，更改cookie

咱們經過js是很方便獲取cookie的只須要document.cookie，咱們就能獲取到當前頁面的cookie。

上面在控制檯經過document.cookie獲取到的cookie

咱們發現咱們獲取到的cookie是一長串字符串，而咱們在Application看到是已經通過序列化的cookie了。咱們既然獲取到了cookie，剩下的就是本身進行序列化處理，操做字符串了，我就很少贅述了。

咱們更改cookie的話，若是有相同值，會覆蓋，若是沒有，會建立新的

經過上面咱們能知道document.cookie是如何獲取和更改cookie值的，無論cookie保存了什麼，都會跟隨請求一併帶到服務端去。若是咱們須要頻繁操做cookie的值，咱們能夠本身封裝操做cookie的get、set方法。

cookie就這些，畢竟咱們如今應該不會大量使用cookie去完成前端數據存儲的工做，一是存儲的數量過小，二是請求都會帶上，浪費帶寬。也由於請求會帶上cookie，因此中間穿插了一些請求攜帶cookie的點。

Web Storage

Web Storage 克服了由cookie代來的一些限制，當數據須要被嚴格控制在客戶端上時，無須持續地將數據發回服務器。Web Storage的兩個主要目的：
1. 提供一種在cookie以外的存儲會話數據的途徑；
2. 提供一種存儲大量能夠跨會話存在的數據的機制。

sessionStorage和localStorage共同的Storage Api

sessionStorage和localStorage同屬於Web Storage，雖然他們的有效時間不一樣，可是有着相同的方法供開發者使用

// clear方法，能夠刪除sessionStorage中全部的值
sessionStorage.clear(); // 清除全部sessionStorage中的數據
localStorage.clear(); // 清除全部localStorage中的數據

// getItem(name) 根據指定的名字name獲取對應的值
var name = sessionStorage.getItem('name'); // 獲取key爲name的value
var name = localStorage.getItem('name'); // 獲取key爲name的value
// 固然，咱們也能夠不這麼着獲取storage中的值，也能夠像下面這樣獲取值
var name = sessionStorage.name; // 獲取key爲name的value
var name = localStorage.name; // 獲取key爲name的value

// key(index) 能夠獲取到index位置處的值的名字
var key = sessionStorage.key(0); // 獲取到了sessionStorage中排在第一個的值的key，好比剛纔的’name‘
var key = localStorage.key(0); // 獲取到了localStorage中排在第一個的值的key，好比剛纔的’name‘
// 獲取到了排在第一位的key值，咱們就能夠根據這個key獲取對應的value了
var value = sessionStorage.getItem(key); // 這樣咱們就獲取到了排在第一位的name的value值
var value = localStorage.getItem(key); // 這樣咱們就獲取到了排在第一位的name的value值

// removedItem(name) 刪除由name指定的鍵值對
sessionStorage.removedItem('name'); // 刪除了key爲name的value
localStorage.removedItem('name'); // 刪除了key爲name的value
// 咱們也能使用刪除對象中屬性的delete方法來刪除
delete sessionStorage.name;
delete localStorage.name;

// setItem(name, value) 爲指定的name設置一個對應的值
sessionStorage.setItem('name', 'zhanwuzha'); // 在sessionStorage中存了一個name，值爲zhanwuzha
localStorage.setItem('name', 'zhanwuzha'); // 在localStorage中存了一個name，值爲zhanwuzha
// 咱們也可使用另外一種方法來設置
sessionStorage.name = 'zhanwuzha'; // 在sessionStorage中存了一個name，值爲zhanwuzha
localStorage.name = 'zhanwuzha'; // 在localStorage中存了一個name，值爲zhanwuzha
複製代碼

以上就是Web Storage中的方法，涵蓋了增刪改查。delete操做符在WebKit中沒法刪除數據，因此咱們仍是使用removeItem()方法吧；

Web Storage中保存的數據，不會跟隨請求一同發回服務器，這是跟cookie最大的區別，而且是按鍵值對來保存數據的，雖然cookie也是鍵值對，可是是相似'name=zhanwuzha&age=16'這樣的字符串，還須要在進一步處理。

sessionStorage

sessionStorage對象存儲特定於某個會話的數據，也就是該數據只保持到瀏覽器關閉。這個對象就像會話cookie，也會在瀏覽器關閉後消失。存儲在sessionStorage中的數據能夠跨越頁面的刷新而存在，同時若是瀏覽器支持，瀏覽器崩潰並重啓以後依然可用（Firefox和WebKit都支持，IE則不行）。——————《JavaScript高級程序設計》

sessionStorage在知足上面storage共同的方法以外，它的使用是綁定在某個會話的：