前端存儲技術

時間 2020-05-07

標籤前端存儲技術简体版

原文原文鏈接

前言

後端經常使用數據庫作數據存儲，譬如MySql、MongoDB，緩存技術存儲數據，如Redis、Memcached；javascript

前端存儲數據目前經常使用的是Cookie、Storage、IndexedDBhtml

Cookie

HTTP Cookie（也叫Web Cookie或瀏覽器Cookie）是服務器發送到用戶瀏覽器並保存在本地的一小塊數據，它會在瀏覽器下次向同一服務器再發起請求時被攜帶併發送到服務器上。一般，它用於告知服務端兩個請求是否來自同一瀏覽器，如保持用戶的登陸狀態。Cookie使基於無狀態的HTTP協議記錄穩定的狀態信息成爲了可能。前端

分類

Cookie老是保存在客戶端中（早期Java中常常會將Cookie與Session做爲存儲技術進行比較，Session是將數據保存在服務器端，大量的數據存儲會增長服務器的負擔），按在客戶端中的存儲位置，可分爲內存Cookie和硬盤Cookie。
內存Cookie由瀏覽器維護，保存在內存中，瀏覽器關閉後就消失了，其存在時間是短暫的。硬盤Cookie保存在硬盤裏，有一個過時時間，除非用戶手工清理或到了過時時間，硬盤Cookie不會被刪除，其存在時間是長期的。因此，按存在時間，可分爲非持久Cookie和持久Cookie。java

建立Cookie

Set-Cookie響應頭部和Cookie請求頭部節
服務器使用Set-Cookie響應頭部向用戶代理（通常是瀏覽器）發送Cookie信息。一個簡單的Cookie可能像這樣：
Set-Cookie: <cookie名>=<cookie值>web

服務器經過該頭部告知客戶端保存Cookie信息數據庫

瀏覽器環境下獲取非HttpOnly標記的Cookie後端

var cookies = document.cookie;

Cookie的缺點

Cookie會被附加在每一個HTTP請求中，因此無形中增長了流量。因爲在HTTP請求中的Cookie是明文傳遞的，因此安全性成問題，除非用HTTPS。api

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 數據庫。

代碼

(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: 'test@example.com' });
 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: 'lisi@example.com' });
 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, } })();