JS-前端數據存儲

客戶端存儲是快速為一個應用進行性能優化的絕佳方法。通過把數據存儲在瀏覽器中，用戶不必每次都向服務器請求獲取同一個信息。在你離線時，使用本地存儲的數據而不是向遠端服務器上請求數據就顯得非常有用，甚至在線用戶也可以從中獲益。 客戶端存儲可以通過這些技術來實現：cookie、sessionstorage、Local Storage (更准確地說是“Web Storage”)、IndexedDB、userData。

一、cookie

1、cookie的作用　　

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

2、cookie的構成

　　一般來說，cookie是由瀏覽器保存的以下幾塊信息構成的

　　（1）名稱：一個唯一確定cookie的名稱

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

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

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

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

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

 

3、如何使用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，好啦，這個廣告用戶已經點擊了，不用顯示小紅點啦

 

4、cookie的缺點

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

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

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

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

 

二、Web存儲機制

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

1、什么是Web存儲

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

　　一般來說，Web Storage包含了兩種對象的定義，sessionStorage和globalStorage，而現在localStorage在修訂過的html5規范中作為持久保存客戶端數據的方案取代了globalStorage，接下來，讓我們看一下它們有什么區別啦

 

2、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以下

 

3、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刪除，或者用戶未清除瀏覽器緩存，數據將會一直保存在磁盤上，因此很適合在客戶端存儲文檔或者長期保存用戶偏好設置

 

4、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中的鍵值對會被清空。

 ps:【每個瀏覽器對localstorage的支持大小是不一樣的，chrome是5M ，IE10是1630K。 可以用下面的js匿名函數測試不同瀏覽器對localstorage的支持大小】

(function() {
if(!window.localStorage) {
console.log('當前瀏覽器不支持localStorage!')
}
var test = '0123456789';
var add = function(num) {
num += num;
if(num.length == 10240) {
test = num;
return;
}
add(num);
}
add(test);
var sum = test;
var show = setInterval(function(){
sum += test;
try {
window.localStorage.removeItem('test');
window.localStorage.setItem('test', sum);
console.log(sum.length / 1024 + 'KB');
} catch(e) {
alert(sum.length / 1024 + 'KB超出最大限制');
clearInterval(show);
}
}, 0.1)
})()

 

三、IndexedDB

1、為什么會有IndexedDB

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

 

2、什么是IndexedDB

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

 

3、IndexedDB的特點

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

　　b、異步： IndexedDB 操作時不會鎖死瀏覽器，用戶依然可以進行其他操作，這與 LocalStorage 形成對比，后者的操作是同步的，異步設計是為了防止大量數據的讀寫，拖慢網頁的表現

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

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

　　e、儲存空間大： IndexedDB 的儲存空間比 LocalStorage 大得多，一般來說不少於 250MB，甚至沒有上限

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

　 

四、IE用戶數據

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

1、什么是userData

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

　　一般來說，userData允許每個文檔最多保存128KB數據，每個域名最多1MB數據，是不是會比cookie存儲的數據要大呢？

 

2、如何使用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")；

 

3、userData的缺點

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

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

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

 

------------------------------------------------------------------------------------------------------------

原文鏈接：https://www.cnblogs.com/Yellow-ice/p/10507472.html

 =================================================================幾種方式的區別=========================================================================================

cookie和session的區別

1、cookie數據存放在客戶的瀏覽器上，session數據存放在服務器上；

2、cookie不是很安全，別人可以分析存放在本地的cookie並進行cookie欺騙；考慮到安全應當使用session

3、session會在一定時間內保存在服務器上，當訪問量增加時，會比較占用服務器的性能；考慮到減輕服務器性能方面，應當使用cookie

4、單個cookie保存的數據不能超過4K，很多瀏覽器都限制一個站點最多保存20個cookie；

5、將登錄信息等重要信息存放在cookie，其他信息如果需要保留，可以放在cookie中；

 

sessionStorage  localStorage  和cookie之間的區別

共同點：都是保存在瀏覽器端，且同源的

區別：

1、cookie數據自始至終在同源的http請求中攜帶，即cookie在瀏覽器和服務器間來回傳遞，而sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。cookie數據還有路徑的概念，可以限制cookie只屬於某個路徑下。

2、存儲大小限制也不同，cookie數據不能超過4K，同時每次http請求都會攜帶cookie，所以cookie只適合保存很小的數據，如會話標識，sessionStorage和localStorage雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或者更大。

3、數據有效期不同，sessionStorage僅在當前瀏覽器窗口關閉前有效，自然也就不可能持久保持localStorage始終有效，窗口或瀏覽器關閉也一直保存，因此用作持久數據；cookie只在設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉

4、作用域不同，sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個頁面；localStorage在所有同源窗口中都是共享的，cookie也是在所有同源窗口中都是共享的

5、WEB Storage支持事件通知機制，可以將數據更新的通知發送給監聽者

6、WEB Storage的api接口使用更方便

 

 =============================================================分割線====================================================================================================

localStorage單頁面及不同頁面監聽變動

1.單頁面監聽storage事件

var orignalSetItem = localStorage.setItem;
localStorage.setItem = function(key,newValue){
var setItemEvent = new Event("setItemEvent");
setItemEvent.key=key;
setItemEvent.newValue = newValue;
window.dispatchEvent(setItemEvent);
orignalSetItem.apply(this,arguments);
}

window.addEventListener("setItemEvent", function(e) {
              
console.log(e.key+"~~~"+e.newValue)
  
});

2.不同頁面

1）監聽了storage事件

<!DOCTYPE html>
<html>
<head lang="en">
<title>A</title>
</head>
<body>
<script>
window.addEventListener("storage", function (e) {
alert(e.newValue);
});
</script>
</body>
</html>

 

2）修改了localStorage

<!DOCTYPE html>
<html>
<head lang="en">
<title>B</title>
</head>
<body>
<script>
localStorage.clear();
localStorage.setItem('foo', 'bar');
</script>
</body>
</html>
————————————————
原文鏈接：https://blog.csdn.net/qq_42076140/article/details/80307326

 

-------------------------------------------VUE------------------------------

 

vue-重寫localStorage.setItem方法以監聽變動，實時更新

解決本地存儲的值改變的時候js不能實時監聽到的問題
問題描述：我們在js里面獲取了某一個localstorage的值，但是后期它可能改變了，我們js只執行一遍沒辦法再次獲取它的值，當然可以刷新頁面獲取，但如果是我們的但頁面就不能刷新頁面了，此時：
我們可以重寫localStorage的setItem方法，當調用setItem方法設置新值的時候，會new Event('setItemEvent')
但是只是實例化事件了，怎么去監聽呢？
我們可以用window.dispatchEvent()這個方法來派發一個事件，讓window去監聽。新實例出來的這個事件會被綁定到window上來監聽它的調用，當調用的時候可以拿到setItem的新值，直接賦值就可以
具體實現
先在src下新建utils文件夾，新建tools.js，它會拋出一個dispatchEventStroage方法
// 重寫setItem事件，當使用setItem的時候，觸發，window.dispatchEvent派發事件
dispatchEventStroage () {
const signSetItem = localStorage.setItem
localStorage.setItem = function (key, val) {
let setEvent = new Event('setItemEvent')
setEvent.key = key
setEvent.newValue = val
window.dispatchEvent(setEvent)
signSetItem.apply(this, arguments)
}
}
在main.js里面全局引入，並use，然后調用該dispatchEventStroage方法，以解決setitemEvent不會立即生效的問題
import Tools from '@/utils/tools'
Vue.use(Tools)
// 為了解決setItemEvent不立即生效，使用事件派發強制更高
Tools.dispatchEventStroage()
 

然后就可以使用了
如果我們在每次發送請求的時候都需要攜帶token字段，token有時候可以存在localstorage里面，但是當token發生改變時，我們js不知道已經改變，所以就需要用到以上方法了。
const reqHeaders = {
Accept: 'text/json',
// 第一次登錄之后返回的token，之后每次請求都攜帶token字段進行驗證
token: localStorage.getItem('token') || ''
}
// window全局監聽localStorage的setItem事件以及時更新
window.addEventListener('setItemEvent', function (e) {
reqHeaders.token = e.newValue
})
 
————————————————
原文鏈接：https://blog.csdn.net/weixin_43869192/article/details/85061248