JS-前端數據存儲
客戶端存儲是快速爲一個應用進行性能優化的絕佳方法。經過把數據存儲在瀏覽器中，用戶沒必要每次都向服務器請求獲取同一個信息。在你離線時，使用本地存儲的數據而不是向遠端服務器上請求數據就顯得很是有用，甚至在線用戶也能夠從中獲益。 客戶端存儲能夠經過這些技術來實現：cookie、sessionstorage、Local Storage (更準確地說是「Web Storage」)、IndexedDB、userData。css
1、cookiehtml
一、cookie的做用 前端
說到cookie，其實cookie有兩個主要功能，第一個功能就是用於解決http無狀態的缺點，在客戶端存儲會話信息，記錄用戶的狀態，而第二個功能也就是咱們如今也常用cookie在客戶端存儲一些其它的數據vue
二、cookie的構成html5
通常來講，cookie是由瀏覽器保存的如下幾塊信息構成的chrome
（1）名稱：一個惟一肯定cookie的名稱數據庫
（2）值：存儲在cookie中的字符串值，值必須被URL編碼json
（3）域：cookie對於哪一個域是有效的，全部向該域發送的請求都會包含這個cookie信息api
（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安全性比較低
2、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中的鍵值對會被清空。
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)
})()
3、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 對象）
4、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的數據也是不安全的，不能存放重要的信息
------------------------------------------------------------------------------------------------------------
原文連接：http://www.javashuo.com/article/p-sanveuji-z.html
=================================================================幾種方式的區別=========================================================================================
cookie和session的區別
一、cookie數據存放在客戶的瀏覽器上，session數據存放在服務器上；
二、cookie不是很安全，別人能夠分析存放在本地的cookie並進行cookie欺騙；考慮到安全應當使用session
三、session會在必定時間內保存在服務器上，當訪問量增長時，會比較佔用服務器的性能；考慮到減輕服務器性能方面，應當使用cookie
四、單個cookie保存的數據不能超過4K，不少瀏覽器都限制一個站點最多保存20個cookie；
五、將登陸信息等重要信息存放在cookie，其餘信息若是須要保留，能夠放在cookie中；
sessionStorage localStorage 和cookie之間的區別
共同點：都是保存在瀏覽器端，且同源的
區別：
一、cookie數據自始至終在同源的http請求中攜帶，即cookie在瀏覽器和服務器間來回傳遞，而sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。cookie數據還有路徑的概念，能夠限制cookie只屬於某個路徑下。
二、存儲大小限制也不一樣，cookie數據不能超過4K，同時每次http請求都會攜帶cookie，因此cookie只適合保存很小的數據，如會話標識，sessionStorage和localStorage雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或者更大。
三、數據有效期不一樣，sessionStorage僅在當前瀏覽器窗口關閉前有效，天然也就不可能持久保持localStorage始終有效，窗口或瀏覽器關閉也一直保存，所以用做持久數據；cookie只在設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉
四、做用域不一樣，sessionStorage不在不一樣的瀏覽器窗口中共享，即便是同一個頁面；localStorage在全部同源窗口中都是共享的，cookie也是在全部同源窗口中都是共享的
五、WEB Storage支持事件通知機制，能夠將數據更新的通知發送給監聽者
六、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
- 1. Web前端數據存儲
- 2. 前端學數據庫之Mysql存儲
- 3. Web前端中的數據存儲
- 4. Web前端數據存儲—cookie機制
- 5. 前端學數據庫之存儲
- 6. 前端存儲
- 7. 【js】前端持久化存儲
- 8. js儲存數據sessionStorage,localStorage
- 9. 前端戰五渣學JavaScript——前端數據存儲
- 10. js客戶端存儲之Web存儲
- 更多相關文章...
- • MySQL存儲過程簡介 - MySQL教程
- • TiDB數據庫的存儲原理（非常詳細） - NoSQL教程
- • Flink 數據傳輸及反壓詳解
- • 三篇文章瞭解 TiDB 技術內幕——說存儲
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. Web前端數據存儲
- 2. 前端學數據庫之Mysql存儲
- 3. Web前端中的數據存儲
- 4. Web前端數據存儲—cookie機制
- 5. 前端學數據庫之存儲
- 6. 前端存儲
- 7. 【js】前端持久化存儲
- 8. js儲存數據sessionStorage,localStorage
- 9. 前端戰五渣學JavaScript——前端數據存儲
- 10. js客戶端存儲之Web存儲