瀏覽器數據存儲方式總結

　　今天主要來說下前端的數據存儲，提及數據存儲，你們確定第一時間想起cookie，localstorage，sessionstorage，而其實還有userData和IndexedDB這兩種數據存儲，接下來將對它們進行一個比較詳細的總結

 

1、爲何要進行數據存儲

　　隨着Web應用程序的出現，慢慢的也開始產生了對於可以直接在客戶端上存儲用戶信息能力的要求，咱們知道當咱們訪問某個頁面的時候，不少東西都須要從服務器端進行加載，若是這個時候能將一些東西存儲在客戶端的話，是否是就能夠直接拿來用啦，方便快捷，速度又快，又能夠節省了不少沒必要要的請求，爲何不用呢？

　　其實在我實習的時候，曾經作過一個功能，當某條廣告更新的時候右上角出現小紅點，用戶點擊事後就不出現小紅點，直到廣告更新的時候小紅點再出現，這個功能當時我就用到了客戶端數據存儲來實現啦，其實像一些登陸信息，偏好設定均可以存儲在客戶端，而首先進行客戶端存儲的方案就是cookie，而今天，cookie只是在客戶端存儲數據的其中一種方式，接下來，咱們將介紹各類客戶端的數據存儲方式

 

2、cookie

一、cookie的做用　　

　　說到cookie，其實cookie有兩個主要功能，第一個功能就是用於解決http無狀態的缺點，在客戶端存儲會話信息，記錄用戶的狀態，而第二個功能也就是咱們如今也常用cookie在客戶端存儲一些其它的數據

 

二、cookie的構成

　　通常來講，cookie是由瀏覽器保存的如下幾塊信息構成的

　　（1）名稱：一個惟一肯定cookie的名稱

　　（2）值：存儲在cookie中的字符串值，值必須被URL編碼

　　（3）域：cookie對於哪一個域是有效的，全部向該域發送的請求都會包含這個cookie信息

　　（4）路徑：對於指定域中的路徑，應該向服務器發送cookie

　　（5）失效時間：表示cookie什麼時候應該被刪除的時間戳

　　（6）安全標誌：指定後，cookie只有在使用SSL鏈接的時候才發送到服務器

 

三、如何使用cookie存儲數據

　　通常來講，有兩種方式能夠生成cookie，一種是服務器發送http響應時指定Set-Cookie進行指定，另外一種咱們能夠使用js生成cookie

　　因爲cookie須要經過URL編碼，所以在寫入cookie時和讀取cookie時咱們都須要進行編碼和解碼操做，爲了方便，咱們能夠本身寫一個cookie的操做對象

var CookieUtil = {
    get: function(name) {
        var cookieName = encodeURIComponent(name) + "=",
              cookieStart = document.cookie.indexOf(cookieName),
              cookieValue = null;
         
         if(cookieStart > -1) {
             var cookieEnd = document.cookie.indexOf(";", cookieStart);
             if (cookieEnd == -1) {
               cookieEnd = document.cookie.length;
             }
             cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
         }
         return cookieValue;
    },
    set: function(name, value, expires, path, domain, secure) {
        var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(valeu);
        if(expires instanceof Data) {
            cookieText += ";expires=" + expires.toGMTString();
        }
        if(path) {
            cookieText += ";path=" + path;
        }
        if(domain) {
            cookieText += ";domain=" + domain;
        }
        if(secure) {
            cookieText += ";secure";
        }
        document.cookie = cookieText;
    }
    unset: function(name, path, domain, secure) {
        this.set(name, "", new Date(0), path, domain, secure);
    }
}

　　當咱們想在cookie存儲一些數據，好比存儲用戶是否點擊廣告的狀態，能夠像下面這樣設置

CookieUtil.set("ifClick", "true");

　　當咱們想判斷用戶是否點擊了廣告時，就須要從cookie拿出數據，能夠像下面這樣獲取數據

CookieUtil.get("ifClick");

　　經過從cookie中獲取出咱們存入的ifClick數據，咱們能夠獲得相應的值爲true，好啦，這個廣告用戶已經點擊了，不用顯示小紅點啦

 

四、cookie的缺點

　　雖然cookie能夠存儲一些數據，可是仍然存儲下面一些缺點

　　（1）cookie須要在客戶端和服務器端之間來回傳送，會浪費沒必要要的資源

　　（2）cookie的存儲大小有限制，對於每一個域，通常只能設置20個cookie，每一個cookie大小不能超過4KB

　　（3）cookie的安全性，cookie由於保存在客戶端中，其中包含的任何數據均可以被他人訪問，cookie安全性比較低

 

3、IE用戶數據

　　雖然H5中能夠經過localstorage和sessionstorage進行數據存儲，可是低版本的ie不支持呀，這可怎麼辦？爲了在ie中存儲數據，微軟經過一個自定義行爲引入了持久化用戶數據的概念

一、什麼是userData

　　userData是ie的一種數據存儲方式，userData 存儲經過將數據寫入一個UserData存儲區（UserData store）來保存數據，userData將數據以XML格式保存在客戶端上，UserData存儲方式只適用於IE瀏覽器，UserData存儲區保存之後，即便IE瀏覽器關閉或者刷新了，下一次進入該頁面，數據也可以從新載入而不會丟失，也就是數據將一直存在，除 非你人爲刪除或者用腳本設置了該數據的失效期

　　通常來講，userData容許每一個文檔最多保存128KB數據，每一個域名最多1MB數據，是否是會比cookie存儲的數據要大呢？

 

二、如何使用userData存儲數據

　　若是咱們想使用userData存儲數據，首先必須使用css在某個元素上指定userData行爲

<div style="behavior:url(#default#userData)" id="dataStore></div>

　　一旦該元素使用了userData行爲，那麼就可使用setAttribute()方法在上面保存數據了，爲了將數據提交到瀏覽器緩存中，還必須調用save()方法並告訴它要保存到的數據空間的名字，數據空間名字能夠徹底任意，僅用於區分不一樣的數據集

var dataStore = document.getElementById("dataStore");
dataStore.setAttribute("ifClick", "true");
dataStore.save("ClickInfo");

　　在上面的代碼中，在使用setAttribute存儲了數據以後，調用了save方法，指定了數據空間的名稱ClickInfo，下一次頁面載入後，可使用load方法指定一樣的數據空間來獲取數據

dataStore.load("ClickInfo");
dataStore.getAttribute("ifClick");

　　在上面的代碼中，對load()的調用獲取了ClickInfo數據空間裏的全部信息，而且使數據能夠經過元素訪問，只有到載入確切完成以後數據纔可使用，好啦，如今咱們又成功獲取到了ifClick的值啦，ifClick的值爲true，好啦，廣告已經點擊，不顯示小紅點

　　若是getAttribute()調用了不存在的名稱或者是還沒有載入的名稱，則返回null，咱們也可使用removeAttribute()方法來刪除某個數據

dataStore.removeAttribute("ifClick")；

 

三、userData的缺點

　　（1）userData只是針對ie的數據存儲

　　（2）userData的訪問限制和對cookie的訪問限制同樣，必須來自同一個域名，在同一個路徑下，並使用與進行存儲腳本一樣的協議才能訪問

　　（3）userData的數據也是不安全的，不能存放重要的信息

 

4、Web存儲機制

　　接下來，咱們要說一下html5中的存儲啦，主要是sessionStorage和localStrorage

一、什麼是Web存儲

　　Web Storage也是一種在客戶端存儲數據的一種機制，主要的目的是爲了克服由cookie帶來的一些限制，當數據須要被嚴格控制在客戶端上時，無須將數據在客戶端和服務器之間來回的進行傳送，而且能夠存儲大量的跨會話的數據

　　通常來講，Web Storage包含了兩種對象的定義，sessionStorage和globalStorage，而如今localStorage在修訂過的html5規範中做爲持久保存客戶端數據的方案取代了globalStorage，接下來，讓咱們看一下它們有什麼區別啦

 

二、sessionStorage

（1）什麼是sessionStorage

　　sessionStorage對象是存儲特定於某個會話的數據，也就是數據只保存到瀏覽器關閉，這個對象就像會話cookie，也會在瀏覽器關閉後消失，存儲在sessionStorage中的數據能夠跨越頁面刷新而存在

（2）如何使用sessionStorage存儲數據

　　因爲sessionStorage對象是Storage的一個實例，因此存儲數據時可使用setItem()或者直接設置新的屬性來存儲數據

//  使用方法存儲數據
sessionStorage.setItem("ifClick", "true");

//  使用屬性存儲數據
sessionStorage.ifClick = "true";

　　當咱們要獲取某個數據的時候，可使用getItem來獲取數據

sessionStorage.getItem("ifClick");

　　咱們如今又成功獲取到ifClick的值啦，固然也能夠經過length屬性和key()方法來獲取sessionStorage的值

（3）sessionStorage的特色

　　a、同源策略限制，若想在不一樣頁面之間對同一個sessionStorage進行操做，這些頁面必須在同一協議、同一主機名和同一端口下

　　b、單標籤頁限制，sessionStorage操做限制在單個標籤頁中，在此標籤頁進行同源頁面訪問均可以共享sessionStorage數據

　　c、只在本地存儲，seesionStorage的數據不會跟隨HTTP請求一塊兒發送到服務器，只會在本地生效，並在關閉標籤頁後清除數據

　　d、存儲方式，seesionStorage的存儲方式採用key、value的方式

　　e、存儲上限限制：不一樣的瀏覽器存儲的上限也不同，但大多數瀏覽器把上限限制在5MB如下

 

三、globalStorage

（1）什麼是globalStorage

　　做爲最初的Web Storage的一部分，這個對象的目的是跨越會話存儲數據，但有特定的訪問限制，如今globalStorage已經被localStorage取代

（2）如何使用globalStorage存儲數據

　　要使用globalStorage，首先要指定哪些域能夠訪問該數據，能夠經過方括號標記使用屬性來實現

globalStorage["aaa.com"].ifClick = "true";

　　在上面的代碼中，訪問的是針對域名aaa.com的存儲空間，這個存儲空間對於aaa.com及其全部子域都是能夠訪問的，咱們能夠像下面這樣來獲取數據

globalStorage[aaa.com].getItem("ifClick");

　　由於globalStorage如今已經比較少使用，若是你們想使用，仍是使用localStorage

（3）globalStorage的特色

　　若是不使用removeItem()或者delete刪除，或者用戶未清除瀏覽器緩存，數據將會一直保存在磁盤上，所以很適合在客戶端存儲文檔或者長期保存用戶偏好設置

 

四、localStorage

（1）什麼是localStorage

　　localStorage對象在修訂過的html5規範中做爲持久保存客戶端數據的方案卻帶了globalStorage，與globalStorage不一樣，不能給localStorage指定任何訪問規則，由於規則已經事先訂好了，要訪問同一個localStorage對象，頁面必須來自同一個域名，使用同一種協議，在同一個端口

（2）如何使用localStorage存儲數據

　　因爲localStorage是Storage的實例，能夠像使用sessionStorage同樣來使用它

localStorage.setItem("ifClick","true");

　　當咱們要獲取數據的時候，能夠像下面這樣獲取

localStorage.getItem("ifClick");

　　存儲在localStorage中的數據和存儲在globalStorage中的數據同樣，都遵循相同的規則，數據保留到經過js刪除或者是用戶清除瀏覽器緩存

（3）localStorage的特色

　　a、localStorage會能夠將第一次請求的數據直接存儲到本地，這個至關於一個5M大小的針對於前端頁面的數據庫，相比於cookie能夠節約帶寬，可是這個倒是隻有在高版本的瀏覽器中才支持的

　　b、目前全部的瀏覽器中都會把localStorage的值類型限定爲string類型，這個在對咱們平常比較常見的JSON對象類型須要一些轉換

　　c、localStorage本質上是對字符串的讀取，若是存儲內容多的話會消耗內存空間，會致使頁面變卡

　　最後，要和你們說的是，sessionStorage和localStorage都克服了cookie的一些限制，它們都有不少共同的特色，localStorage與sessionStorage的惟一一點區別就是localStorage屬於永久性存儲，而sessionStorage屬於當會話結束的時候，sessionStorage中的鍵值對會被清空

 

5、IndexedDB

一、爲何會有IndexedDB

　　現有的瀏覽器數據儲存方案，都不適合儲存大量數據：Cookie 的大小不超過4KB，且每次請求都會發送回服務器；LocalStorage 在 2.5MB 到 10MB 之間（各家瀏覽器不一樣），並且不提供搜索功能，不能創建自定義的索引，因此，須要一種新的解決方案，這就是 IndexedDB 誕生的背景

 

二、什麼是IndexedDB

　　通俗地說，IndexedDB 就是瀏覽器提供的本地數據庫，它能夠被網頁腳本建立和操做，IndexedDB 容許儲存大量數據，提供查找接口，還能創建索引，這些都是 LocalStorage 所不具有的，就數據庫類型而言，IndexedDB 不屬於關係型數據庫（不支持 SQL 查詢語句），更接近 NoSQL 數據庫

 

三、IndexedDB的特色

　　a、鍵值對儲存： IndexedDB 內部採用對象倉庫（object store）存放數據，全部類型的數據均可以直接存入，包括 JavaScript 對象，對象倉庫中，數據以"鍵值對"的形式保存，每個數據記錄都有對應的主鍵，主鍵是獨一無二的，不能有重複，不然會拋出一個錯誤

　　b、異步： IndexedDB 操做時不會鎖死瀏覽器，用戶依然能夠進行其餘操做，這與 LocalStorage 造成對比，後者的操做是同步的，異步設計是爲了防止大量數據的讀寫，拖慢網頁的表現

　　c、支持事務： IndexedDB 支持事務（transaction），這意味着一系列操做步驟之中，只要有一步失敗，整個事務就都取消，數據庫回滾到事務發生以前的狀態，不存在只改寫一部分數據的狀況

　　d、同源限制：IndexedDB 受到同源限制，每個數據庫對應建立它的域名，網頁只能訪問自身域名下的數據庫，而不能訪問跨域的數據庫

　　e、儲存空間大： IndexedDB 的儲存空間比 LocalStorage 大得多，通常來講很多於 250MB，甚至沒有上限

　　f、支持二進制儲存：IndexedDB 不只能夠儲存字符串，還能夠儲存二進制數據（ArrayBuffer 對象和 Blob 對象）

　　對於IndexedDB的操做會比較複雜，若是你們有興趣能夠在網上再本身看一些資料

 

　　好啦，今天就介紹到這裏啦，這是目前比較經常使用的幾種存儲方式，但願你們一塊兒學習呀