前端本地存儲方案localForage在vue3中使用方法
前言
前端有多種本地存儲方案可供選擇，常見的有：
- Cookie：小型的文本文件，存儲少量數(shù)據(jù)
- Web Storage ：包括：localStorage和sessionStorage，存儲數(shù)據(jù)有上限（5M）左右
- IndexedDB：一種高級的客戶端存儲API，存儲量大、高版本瀏覽器兼容性較好
這些本地存儲方案各有優(yōu)缺點，近期發(fā)現(xiàn)一種前端本地存儲的庫 localForage，遵循“漸進增強”或“優(yōu)雅降級”的原則，集合以上多種方式，使用異步API封裝了Web Storage、IndexedDB和WebSQL的庫，提供了簡單易用的方法來存儲和檢索數(shù)據(jù)，API 相對簡單，易于上手，下面開始正式介紹localForage用法。
localForage
localForage 是一個快速而簡單的 JavaScript 存儲庫。通過使用異步存儲（IndexedDB 或 WebSQL）和簡單的類 localStorage 的 API ，localForage 能改善 Web 應(yīng)用的離線體驗。
在不支持 IndexedDB 或 WebSQL 的瀏覽器中，localForage 使用 localStorage。
- github地址： https://github.com/localForage/localForage
- API文檔：https://localforage.github.io/localForage/#data-api-setitem
第一種使用方法
- 安裝引入
// 通過npm安裝 npm install --save localforage // 引入 import localforage from 'localforage'
// 或通過 bower 引入 <script src="localforage.js"></script>
- 創(chuàng)建indexedDB
const firstIndexedDB = localforage.createInstance({
name: 'myFirstIndexedDB',
// 支持config所有配置
// storeName: 'keyvaluepairs', // 僅接受字母，數(shù)字和下劃線
})
- 存值
//存儲字符串
firstIndexedDB.setItem("data1", "今天是個好日子");
//存儲對象
firstIndexedDB.setItem("data2", {a:1,b: 2});
//存儲數(shù)組對象
firstIndexedDB.setItem("data3", [{a:1,b: 2}, {a:2,b:3}, {a:3,b:4}]);
4. 取值 （由于indexedDB的存取都是異步的，建議使用 promise.then() 或 async/await 去讀值，如果 key 不存在，getItem() 將返回 null。）
//第一種方法
firstIndexedDB.getItem('data1').then(value=> {
console.log("數(shù)據(jù)data1",value);
}).catch(err => {
console.log('錯誤信息', err)
});
firstIndexedDB.getItem('data2').then(value=> {
console.log("數(shù)據(jù)data2",value);
}).catch(err => {
console.log('錯誤信息', err)
});
//第二種方法
try {
const value = await firstIndexedDB.getItem('data3');
console.log("數(shù)據(jù)3",value);
} catch (err) {
console.log('錯誤信息', err)
}
5. 刪除
//輸入key值
firstIndexedDB.removeItem('data3');
- 重置清空數(shù)據(jù)庫
firstIndexedDB.clear();
- 獲取數(shù)據(jù)庫存儲key的數(shù)量
firstIndexedDB.length().then(numberOfKeys=> {
// 輸出數(shù)據(jù)庫的大小
console.log("數(shù)據(jù)庫長度",numberOfKeys);
}).catch(function(err) {
console.log("出錯",err);
});
8. 根據(jù)key的索引獲取名稱
firstIndexedDB.key(2).then(keyName=> {
// key 名
console.log("key 名",keyName);
}).catch(function(err) {
console.log("出錯",err);
});
9. 獲取數(shù)據(jù)庫所有key值
firstIndexedDB.keys().then(function(keys) {
console.log("所有key集合",keys);
}).catch(function(err) {
console.log("出錯",err);
});
10. 迭代循環(huán)打印所有key-value值
firstIndexedDB.iterate(function(value, key, iterationNumber) {
// 此回調(diào)函數(shù)將對所有 key/value 鍵值對運行
console.log([key, value,iterationNumber]);
}).then(function() {
console.log('迭代完成');
}).catch(function(err) {
console.log("出錯",err);
});
11. 提前退出迭代循環(huán)
firstIndexedDB.iterate(function(value, key, iterationNumber) {
// 此回調(diào)函數(shù)將對所有 key/value 鍵值對運行
if (iterationNumber < 3) {
console.log([key, value, iterationNumber]);
} else {
return [key, value, iterationNumber];
}
}).then(function() {
console.log('退出迭代');
}).catch(function(err) {
console.log("出錯",err);
});
- 創(chuàng)建多實例
var secondIndexedDB = localforage.createInstance({
name: "secondIndexedDB"
});
var thirdIndexedDB = localforage.createInstance({
name: "thirdIndexedDB"
});
- 設(shè)置某個數(shù)據(jù)倉庫 key 的值
secondIndexedDB.setItem("key", "value");
thirdIndexedDB.setItem("key", "value2");
- 刪除數(shù)據(jù)庫 dropInstance
14.1 調(diào)用時，若不傳參，則刪除當前實例的數(shù)據(jù)倉庫
localforage.dropInstance().then(function() {
console.log('刪除當前實例的數(shù)據(jù)倉庫')
});
14.2 調(diào)用時，若參數(shù)是指定了 name 和 storeName 屬性的對象，會刪除指定的數(shù)據(jù)倉庫
localforage.dropInstance({
name: "thirdIndexedDB",
storeName: "keyvaluepairs"
}).then(function() {
console.log('刪除指定的數(shù)據(jù)庫下的指定數(shù)據(jù)倉庫')
});
14.3 調(diào)用時，若參數(shù)僅指定了 name 屬性的對象，將刪除指定的數(shù)據(jù)庫（及其所有數(shù)據(jù)倉庫）
localforage.dropInstance({
name: "secondIndexedDB"
}).then(function() {
console.log('刪除指定的數(shù)據(jù)庫（及其所有數(shù)據(jù)倉庫）')
});
第二種使用方法
- 選擇特定存儲引擎
默認情況下，localForage 按照以下順序選擇數(shù)據(jù)倉庫的后端驅(qū)動：
（1） IndexedDB
（2） WebSQL
（3） localStorage
如果你想強制使用特定的驅(qū)動，可以使用 setDriver()，參數(shù)為以下的某一個或多個：
（1） localforage.INDEXEDDB
（2） localforage.WEBSQL
（3） localforage.LOCALSTORAGE
強制設(shè)置 localStorage 為后端的驅(qū)動
localforage.setDriver(localforage.LOCALSTORAGE);
列出可選的驅(qū)動，以優(yōu)先級排序
localforage.setDriver([localforage.LOCALSTORAGE, localforage.INDEXEDDB]);
- 配置
可以通過 config() 方法設(shè)置數(shù)據(jù)庫信息?？捎玫倪x項有 driver，name，storeName，version，size，和 description。
localforage.config({
driver : localforage.LOCALSTORAGE, // 使用 LOCALSTORAGE；也可以使用 setDriver()
name : 'firstIndexedDB',
version : 1.0,
size : 4980736, // 數(shù)據(jù)庫的大小，單位為字節(jié)?，F(xiàn)僅 WebSQL 可用
storeName : 'keyvaluepairs1', // 僅接受字母，數(shù)字和下劃線
description : 'some description'
});
- 存值
注意：在數(shù)據(jù)交互之前，你必須先調(diào)用 config()。即在使用 getItem()，setItem()，removeItem()，clear()，key()，keys() 或 length() 前要先調(diào)用 config()。
localforage.setItem("data1", "今天是個好日子");
5. 判斷異步驅(qū)動程序初始化過程是否已完成
localforage.ready().then(()=> {
// 當 localforage 將指定驅(qū)動初始化完成時，此處代碼運行
console.log(localforage.driver()); //返回正在使用的驅(qū)動的名字 "asyncStorage"
}).catch( e=> {
console.log(e); // `No available storage method found.`
// 當沒有可用的驅(qū)動時，`ready()` 將會失敗
});
- 判斷瀏覽器是否支持driverName 返回布爾值
console.log(localforage.supports(localforage.INDEXEDDB));
總結(jié)
到此這篇關(guān)于前端本地存儲方案localForage在vue3中使用方法的文章就介紹到這了,更多相關(guān)前端本地存儲方案localForage使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue實現(xiàn)右鍵菜單組件的超詳細教程(支持快捷鍵)
右鍵菜單組件非常常見,所有的前端開發(fā)工程師都會遇到類似的功能組件開發(fā)需求,這篇文章主要給大家介紹了關(guān)于Vue實現(xiàn)右鍵菜單組件的超詳細教程,文中介紹的方法支持快捷鍵,需要的朋友可以參考下2024-02-02
vue + element-ui實現(xiàn)簡潔的導入導出功能
Element-UI是餓了么前端團隊推出的一款基于Vue.js 2.0 的桌面端UI框架,手機端有對應(yīng)框架是 Mint UI，下面這篇文章主要給大家介紹了關(guān)于利用vue + element-ui如何實現(xiàn)簡潔的導入導出功能的相關(guān)資料，需要的朋友可以參考下。2017-12-12
vue項目使用node連接數(shù)據(jù)庫的方法(前后端分離)
這篇文章主要介紹了vue項目使用node連接數(shù)據(jù)庫（前后端分離），本文結(jié)合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-12-12
vue基礎(chǔ)ESLint?Prettier配置教程詳解
這篇文章主要介紹了vue基礎(chǔ)ESLint?Prettier配置教程詳解，本文使用VsCode?+?Vue?+?ESLint?+?Prettier?實現(xiàn)代碼格式規(guī)范?+?保存自動修復代碼js+vue2022-07-07
這篇文章主要介紹了vue3使用echarts并封裝echarts組件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
在VUE中實現(xiàn)文件下載并判斷狀態(tài)的方法
今天小編就為大家分享一篇在VUE中實現(xiàn)文件下載并判斷狀態(tài)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要給大家介紹了關(guān)于Vue開發(fā)中常見的套路和技巧的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-11-11
在本文里我們給大家整理了關(guān)于vue添加class樣式實例，對此有興趣的朋友們可以學習參考下。2019-02-02
vue3響應(yīng)式Object代理對象的讀取示例詳解
這篇文章主要為大家介紹了vue3響應(yīng)式Object代理對象的讀取示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
Vue項目實現(xiàn)簡單的權(quán)限控制管理功能
這篇文章主要介紹了Vue項目實現(xiàn)簡單的權(quán)限控制功能，文中給大家介紹了兩種方式進行權(quán)限限制，本文通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下2019-07-07