web前端之瀏覽器儲存
一、前言
學習前端的可以關注網頁製作web前端部落哦，每天更新干貨。web前端技術日新月異，對於瀏覽器的儲存來說，cookie儲存資料的功能已經很難滿足開發所需，逐漸被WebStorage所取代，本文主要介紹Cookie,WebStorage和IndexDB之間差異。
二、Cookie
1.Cookie的來源
因為HTTP協議是無狀態的，HTTP 協議自身不對請求和響應之間的通訊狀態進行儲存，通俗來說，伺服器不知道使用者上一次做了什麼，這嚴重阻礙了互動式Web應用程式的實現。在典型的網上購物場景中，使用者瀏覽了幾個頁面，買了一盒餅乾和兩瓶飲料。最後結帳時，由於HTTP的無狀態性，不通過額外的手段，伺服器並不知道使用者到底買了什麼，於是就誕生了Cookie。它就是用來繞開HTTP的無狀態性的“額外手段”之一。伺服器可以設定或讀取Cookies中包含資訊，藉此維護使用者跟伺服器會話中的狀態。
在剛才的購物場景中，當用戶選購了第一項商品，伺服器在向用戶傳送網頁的同時，還發送了一段Cookie，記錄著那項商品的資訊。當用戶訪問另一個頁面，瀏覽器會把Cookie傳送給伺服器，於是伺服器知道他之前選購了什麼。使用者繼續選購飲料，伺服器就在原來那段Cookie裡追加新的商品資訊。結帳時，伺服器讀取傳送來的Cookie就行了。
2.什麼是Cookie
Cookie指某些網站為了辨別使用者身份而儲存在使用者本地終端上的資料(通常經過加密)。 cookie是服務端生成，客戶端進行維護和儲存。通過cookie,可以讓伺服器知道請求是來源哪個客戶端，就可以進行客戶端狀態的維護，比如登陸後重新整理，請求頭就會攜帶登陸時response header中的set-cookie,Web伺服器接到請求時也能讀出cookie的值，根據cookie值的內容就可以判斷和恢復一些使用者的資訊狀態。
3.Cookie的特點
-
可以用於瀏覽器端和伺服器端之間的互動，cookie的資料會自動的傳遞到伺服器，伺服器端也可以寫cookie到客戶端。
-
客戶端自身資料的儲存，需要設定過期時間expire。設定的cookie過期時間之前一直有效，即使視窗或瀏覽器關閉。若不設定過期時間，則表示這個cookie的生命期為瀏覽器會話期間，關閉瀏覽器視窗，cookie就消失。
4.Cookie的生成方式
生成方式一：http response header中的set-cookie生成方式二：js中可以通過document.cookie可以讀寫cookie//以鍵值對的形式展示
例如我們在簡書控制檯輸入，以下兩句程式碼，便可以在"Application"檢視生成的cookie
<script>document.cookie="userName=hello"document.cookie="gender=male"</script>
5.Cookie的缺陷
-
cookie會被附加在每個HTTP請求中，在HttpRequest 和HttpResponse的header中都是要被傳輸的，所以無形中增加了一些不必要的流量損失。
cookie是用來維護使用者資訊的，而域名(domain)下所有請求都會攜帶cookie，但對於靜態檔案的請求，攜帶cookie資訊根本沒有用，此時可以通過cdn（儲存靜態檔案的）的域名和主站的域名分開來解決。
-
由於在HTTP請求中的Cookie是明文傳遞的，所以安全性成問題，除非用HTTPS。
可以使用HttpOnly提升Cookie安全性。httponly 不支援讀寫，瀏覽器不允許指令碼操作document.cookie去更改cookie，一般情況下都應該設定這個為true，這樣可以避免被XSS攻擊拿到cookie。
-
Cookie的大小限制在4KB左右，對於複雜的儲存需求來說是不夠用的。很多瀏覽器都限制一個站點的cookie個數也是有限制的。
這裡需注意：各瀏覽器的cookie每一個name=value的value值大概在4k，所以4k並不是一個域名下所有的cookie共享的,而是一個name的大小。
基於Cookie儲存資料功能有所欠缺，HTML5中新增了本地儲存的解決方案----WebStorage，它分成兩類：sessionStorage和localStorage。這樣有了WebStorage後，cookie能只做它應該做的事情了——作為客戶端與伺服器互動的通道，保持客戶端狀態。
三、LocalStorage
1.LocalStorage的特點
-
儲存的資料長期存在，下一次訪問該網站的時候，網頁可以直接讀取以前儲存的資料。
-
大小為5M左右
-
僅在客戶端使用，不和服務端進行通訊
-
介面封裝較好
基於上面的特點，LocalStorage可以作為瀏覽器本地快取方案，用來提升網頁首屏渲染速度(根據第一請求返回時，將一些不變資訊直接儲存在本地)。
2.存入/讀取資料
localStorage儲存的資料，以“鍵值對”的形式存在。也就是說，每一項資料都有一個鍵名和對應的值。所有的資料都是以文字格式儲存。
存入資料使用setItem方法。它接受兩個引數，第一個是鍵名，第二個是儲存的資料。localStorage.setItem("key","value");
讀取資料使用getItem方法。它只有一個引數，就是鍵名。var valueLocal = localStorage.getItem("key");
具體步驟，請看下面的例子：
<script>if(window.localStorage){
localStorage.setItem（'name','world'）
localStorage.setItem（“gender','famale'）
}</script>
<body> <div id="name"></div> <div id="gender"></div> <script> var name=localStorage.getItem（'name'） var gender=localStorage.getItem（'gender'） document.getElementById（'name'）.innerHTML=name document.getElementById（'gender'）.innerHTML=gender </script> </body>
四、SessionStorage
sessionStorage儲存的資料用於瀏覽器的一次會話，當會話結束（通常是該視窗關閉），資料被清空；sessionStorage不在不同的瀏覽器視窗中共享，即使是同一個頁面；localStorage 在所有同源視窗中都是共享的；cookie也是在所有同源視窗中都是共享的。除了儲存期限的長短不同，SessionStorage的屬性和方法與LocalStorage完全一樣。
1.SessionStorage的特點
-
會話級別的瀏覽器儲存
-
大小為5M左右
-
僅在客戶端使用，不和服務端進行通訊
-
介面封裝較好
基於上面的特點，SessionStorage 可以有效對錶單資訊進行維護，比如重新整理時，表單資訊不丟失。
2.sessionStorage 、localStorage 和 cookie 之間的區別
共同點：都是儲存在瀏覽器端，且同源的。
不同點如下：
五、IndexedDB
Web Storage使用簡單字串鍵值對在本地儲存資料，方便靈活，但是對於大量結構化資料儲存力不從心，IndexedDB是為了能夠在客戶端儲存大量的結構化資料，並且使用索引高效檢索的API。
1.IndexedDB的特點
-
IndexedDB是一種低階API，用於客戶端儲存大量結構化資料。該API使用索引來實現對該資料的高效能搜尋。
-
為應用建立離線版本
2.IndexedDB的常見操作
在IndexedDB大部分操作並不是我們常用的呼叫方法，返回結果的模式，而是請求——響應的模式
①建立開啟indexdb ----window.indexedDB.open("testDB")
這條指令並不會返回一個DB物件的控制代碼，我們得到的是一個IDBOpenDBRequest物件，而我們希望得到的DB物件在其result屬性中
除了result，IDBOpenDBRequest介面定義了幾個重要屬性
onerror: 請求失敗的回撥函式控制代碼
onsuccess:請求成功的回撥函式控制代碼
onupgradeneeded:請求資料庫版本變化控制代碼
<script>
function openDB(name){
var request=window.indexedDB.open(name)//建立開啟indexdb
request.onerror=function (e){
console.log（'open indexdb error'）
}
request.onsuccess=function (e){
myDB.db=e.target.result//這是一個 IDBDatabase物件，這就是IndexedDB物件
console.log(myDB.db)
}
}
var myDB={
name：'testDB'，
version：'1'，
db:null
}
openDB(myDB.name)
</script>
控制檯得到一個 IDBDatabase物件，這就是IndexedDB物件
②關閉indexdb----indexdb.close()
③刪除indexdb----window.indexedDB.deleteDatabase(indexdb)
<script>
function openDB(name){
var request=window.indexedDB.open(name)
request.onerror=function(e){
console.log（'open indexdb error')
}
request.onsuccess=function(e){
myDB.db=e.target.result
callback && callback()
}
}
var myDB={
name："testDB"，
version："1"，
db:null
}
openDB(myDB.name,function(){//回撥函式
myDB.db.close()//關閉indexdb
window.indexedDB.deleteDatabase(myDB.db)//刪除indexdb
}
</script>
最後：如果覺得文章對你有幫助記得關注哦！
“相信有很多想學前端的小夥伴，今年年初我花了一個月整理了一份最適合2018年學習的web前端乾貨，從最基礎的HTML+CSS+JS到移動端HTML5等都有整理，送給每一位前端小夥伴，53763，1707這裡是小白聚集地，歡迎初學和進階中的小夥伴。”
