前端存儲技術
前言
後端常用數據庫做數據存儲,譬如MySql、MongoDB,緩存技術存儲數據,如Redis、Memcached;
前端存儲數據目前常用的是Cookie、Storage、IndexedDB
Cookie
HTTP Cookie(也叫Web Cookie或瀏覽器Cookie)是服務器發送到用戶瀏覽器並保存在本地的一小塊數據,它會在瀏覽器下次向同一服務器再發起請求時被攜帶並發送到服務器上。通常,它用於告知服務端兩個請求是否來自同一瀏覽器,如保持用戶的登錄狀態。Cookie使基於無狀態的HTTP協議記錄穩定的狀態信息成為了可能。
分類
Cookie總是保存在客戶端中(早期Java中經常會將Cookie與Session作為存儲技術進行比較,Session是將數據保存在服務器端,大量的數據存儲會增加服務器的負擔),按在客戶端中的存儲位置,可分為內存Cookie和硬盤Cookie。
創建Cookie
Set-Cookie響應頭部和Cookie請求頭部節
服務器使用Set-Cookie響應頭部向用戶代理(一般是瀏覽器)發送Cookie信息。一個簡單的Cookie可能像這樣:
Set-Cookie: <cookie名>=<cookie值>
服務器通過該頭部告知客戶端保存Cookie信息
瀏覽器環境下獲取非HttpOnly標記的Cookie
var cookies = document.cookie;
Cookie的缺點
Cookie會被附加在每個HTTP請求中,所以無形中增加了流量。由於在HTTP請求中的Cookie是明文傳遞的,所以安全性成問題,除非用HTTPS。
Cookie的大小限制在4KB左右,對於復雜的存儲需求來說是不夠用的。
Cookie的簡單封裝
設置Cookie時一般會將路徑和過期時間一並設置,註意過期時間需要轉換成GMT或者UTC
代碼如下
(function IIFE(root){ function getCookie(cname, defaultValue){var value = new RegExp(‘(^|;| )‘+cname+‘=([^;]*?)(;|$)‘, ‘g‘).exec(document.cookie); console.log(‘value:‘, value); if(!value) return defaultValue; return value[2]; } function setCookie(cname, cvalue, day, path){ day = day || 1; path = path || ‘/‘; var date = new Date(); date.setTime(date.getTime() + day * 24 * 60 * 60 * 1000); document.cookie = cname+‘=‘+cvalue+‘; expires=‘ + date.toGMTString() + ‘; path=‘+path+‘; ‘; } function deleteCookie(cname){ setCookie(cname, null, -1); } root.Util = { getCookie: getCookie, setCookie: setCookie, deleteCookie: deleteCookie, } })(window);
測試結果如下
Storage
作為 Web Storage API 的接口,Storage 提供了訪問特定域名下的會話存儲(session storage)或本地存儲(local storage)的功能,例如,可以添加、修改或刪除存儲的數據項。
如果你想要操作一個域名的會話存儲(session storage),可以使用 window.sessionStorage;如果想要操作一個域名的本地存儲(local storage),可以使用 window.localStorage。
sessionStorage和localStorage的用法是一樣的,區別在於sessionStorage會在會話關閉也就是瀏覽器關閉時失效,而localStorage是將數據存儲在本地,不受關閉瀏覽器影響,除非手動清除數據
相關的api大家可以參考 https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage
代碼
(function IIFE(){ if(!window.localStorage){ alert(‘your browser is not support localStorage!‘); return; } function getStorage(sname, defaultValue){ //result = window.localStorage.sname //result = window.localStorage[sname] var result = window.localStorage.getItem(sname); return result || defaultValue; } function setStorage(sname, svalue){ window.localStorage.setItem(sname, svalue); } function removeItem(sname){ window.localStorage.removeItem(sname); } function getKey(keyIndex){ return window.localStorage.key(keyIndex); } function getAllKeys(){ var arr = []; for(var i=0;i<window.localStorage.length;i++){ arr.push(window.localStorage.key(i)); } return arr; } function clearStorage(){ window.localStorage.clear(); } function onStorageChange(event){ console.log(event) } window.addEventListener(‘storage‘, onStorageChange); window.Util = { getStorage: getStorage, setStorage: setStorage, removeItem: removeItem, getKey: getKey, getAllKeys: getAllKeys, clearStorage: clearStorage, } })();
測試結果
IndexedDB
隨著瀏覽器的功能不斷增強,越來越多的網站開始考慮,將大量數據儲存在客戶端,這樣可以減少從服務器獲取數據,直接從本地獲取數據。
現有的瀏覽器數據儲存方案,都不適合儲存大量數據:Cookie 的大小不超過 4KB,且每次請求都會發送回服務器;LocalStorage 在 2.5MB 到 10MB 之間(各家瀏覽器不同),而且不提供搜索功能,不能建立自定義的索引。所以,需要一種新的解決方案,這就是 IndexedDB 誕生的背景。
通俗地說,IndexedDB 就是瀏覽器提供的本地數據庫,它可以被網頁腳本創建和操作。IndexedDB 允許儲存大量數據,提供查找接口,還能建立索引。這些都是 LocalStorage 所不具備的。就數據庫類型而言,IndexedDB 不屬於關系型數據庫(不支持 SQL 查詢語句),更接近 NoSQL 數據庫。
IndexedDB相關api可參考 https://wangdoc.com/javascript/bom/indexeddb.html#indexeddb-%E5%AF%B9%E8%B1%A1
代碼
(function IIFE(){ if(!window.indexedDB){ alert(‘your browser is not support indexedDB!‘); return; } var request = window.indexedDB.open(‘person‘, 1); var db; request.onerror = function (event) { console.log(‘數據庫打開報錯‘); }; request.onsuccess = function (event) { db = request.result; console.log(‘數據庫打開成功‘); }; request.onupgradeneeded = function(event) { console.log(‘onupgradeneeded...‘); db = event.target.result; var objectStore = db.createObjectStore(‘person‘, { keyPath: ‘id‘ }); objectStore.createIndex(‘name‘, ‘name‘, { unique: false }); objectStore.createIndex(‘email‘, ‘email‘, { unique: true }); } function add(obj) { var request = db.transaction([‘person‘], ‘readwrite‘) .objectStore(‘person‘) .add(obj) //.add({ id: 1, name: ‘ccy‘, age: 18, email: ‘[email protected]‘ }); request.onsuccess = function (event) { console.log(‘數據寫入成功‘); }; request.onerror = function (event) { console.log(‘數據寫入失敗‘); } } function read(index) { var transaction = db.transaction([‘person‘]); var objectStore = transaction.objectStore(‘person‘); var request = objectStore.get(index); request.onerror = function(event) { console.log(‘事務失敗‘); }; request.onsuccess = function(event) { if (request.result) { console.log(‘Name: ‘ + request.result.name); console.log(‘Age: ‘ + request.result.age); console.log(‘Email: ‘ + request.result.email); } else { console.log(‘未獲得數據記錄‘); } }; } function readAll() { var objectStore = db.transaction(‘person‘).objectStore(‘person‘); objectStore.openCursor().onsuccess = function (event) { var cursor = event.target.result; if (cursor) { console.log(‘Id: ‘ + cursor.key); console.log(‘Name: ‘ + cursor.value.name); console.log(‘Age: ‘ + cursor.value.age); console.log(‘Email: ‘ + cursor.value.email); cursor.continue(); } else { console.log(‘沒有更多數據了!‘); } }; } function update(obj) { var request = db.transaction([‘person‘], ‘readwrite‘) .objectStore(‘person‘) .put(obj) //.put({ id: 1, name: ‘李四‘, age: 35, email: ‘[email protected]‘ }); request.onsuccess = function (event) { console.log(‘數據更新成功‘); }; request.onerror = function (event) { console.log(‘數據更新失敗‘); } } function remove(index) { var request = db.transaction([‘person‘], ‘readwrite‘) .objectStore(‘person‘) .delete(index); request.onsuccess = function (event) { console.log(‘數據刪除成功‘); }; } window.util = { add: add, read: read, readAll: readAll, update: update, remove: remove, } })();
測試結果
後記
瀏覽器存儲技術目前流行的基本就上面介紹的三種,之前出現的webSql由於用方言SQLlite導致無法統一,也就是說這是一個廢棄的標準。
localStorage、indexedDB這裏沒有做詳細的介紹,只是簡單的給出示例代碼做做演示,不熟悉的可以查閱相關API。
參考資料
https://developer.mozilla.org/zh-CN/docs/Web/API/Storage
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Cookies
https://zh.wikipedia.org/wiki/Cookie
http://www.ruanyifeng.com/blog/2018/07/indexeddb.html
https://wangdoc.com/javascript/bom/indexeddb.html
前端存儲技術