做网站的基本条件,广州模板建站系统,专业做甜点的网站,wordpress 古今介绍
localForage 是一个快速而简单的 JavaScript 存储库。通过使用异步存储#xff08;IndexedDB 或 WebSQL#xff09;和简单的类 localStorage 的 API #xff0c;localForage 能改善 Web 应用的离线体验。
在不支持 IndexedDB 或 WebSQL 的浏览器中#xff0c;localF…介绍
localForage 是一个快速而简单的 JavaScript 存储库。通过使用异步存储IndexedDB 或 WebSQL和简单的类 localStorage 的 API localForage 能改善 Web 应用的离线体验。
在不支持 IndexedDB 或 WebSQL 的浏览器中localForage 使用 localStorage。
可用于 收集用户使用日志 存储大量数据需要支持IndexedDB 或 WebSQL 前端本地存储
Cookie一种小型的客户端和服务器小文本文件。有条数限制,每条最大4kb左右。Web StorageHTML5引入包括localStorage和sessionStorage。最大可存5Mb左右。IndexedDB一个非关系型数据库可以存储大量数据支持索引无需手动进行序列化和反序列化。无存储大小限制老版本浏览器兼容性差。Web SQL Database类似于关系型数据库的操作方式可以存储大量数据无需手动进行序列化和反序列化。无存储大小限制兼容性差已被废弃。File APIHTML5引入可访问用户的本地文件系统。安全性和兼容性差。 localforage使用
1.引入插件
直接script引入
script srclocalforage/dist/localforage.js/script使用npm安装并导入
npm install localforage
import localForage from localforage;
2.配置localforage数据交互之前必须先调用 config()
localforage.config({driver : localforage.WEBSQL, // 指定某个,需要注意浏览器兼容性//driver : [localforage.WEBSQL, localforage.INDEXEDDB, localforage.LOCALSTORAGE], // 指定使用顺序,哪个可用先用哪个name : myApp, // 数据库名称version : 1.0, // 数据库版本size : 4980736, // 数据库的大小单位为字节。现仅 WebSQL 可用storeName : keyvaluepairs, // 仅接受字母数字和下划线description : some description, // 描述信息
});
3.[可选]配置多个实例
var mainStore localforage.createInstance({name: nameHere,storeName : tableOne,description : ...
});var otherStore localforage.createInstance({name: otherName
});// 设置某个数据仓库 key 的值不会影响到另一个数据仓库
mainStore.setItem(key, value);
otherStore.setItem(key, value2);//删除该实例
otherStore.dropInstance().then(function() {console.log(Dropped the store of the current instance);
});
4.增删改查等功能支持promiseasync/await回调函数三种方式
//支持promise格式,官方推荐
localforage.setItem(somekey, some value).then(function (value) {// Do other things once the value has been saved.console.log(value);
}).catch(function(err) {// This code runs if there were any errorsconsole.log(err);
});
//支持async/await格式
try {const value await localforage.getItem(somekey);console.log(value);
} catch (err) {console.log(err);
}
//支持回调函数
localforage.removeItem(somekey, function(err) {console.log(err);
});
//清空
localforage.clear().then(function() {// Run this code once the database has been entirely deleted.console.log(Database is now empty.);
}).catch(function(err) {// This code runs if there were any errorsconsole.log(err);
});
//获取记录的条数
localforage.length().then(function(numberOfKeys) {// Outputs the length of the database.console.log(numberOfKeys);
}).catch(function(err) {// This code runs if there were any errorsconsole.log(err);
});
//获取id为2的数据
localforage.key(2).then(function(keyName) {// Name of the key.console.log(keyName);
}).catch(function(err) {// This code runs if there were any errorsconsole.log(err);
});
//获取所有的key值
localforage.keys().then(function(keys) {// An array of all the key names.console.log(keys);
}).catch(function(err) {// This code runs if there were any errorsconsole.log(err);
});
//迭代
localforage.iterate(function(value, key, iterationNumber) {// Resulting key/value pair -- this callback// will be executed for every item in the// database.console.log([key, value]);
}).then(function() {console.log(Iteration has completed);
}).catch(function(err) {// This code runs if there were any errorsconsole.log(err);
});//其他api
localforage.driver(); // 返回config配置的name的值
localforage.supports(localforage.INDEXEDDB); // 判断是否支持INDEXEDDB,返回true/false
//判断是否准备就绪
localforage.ready().then(function() {// This code runs once localforage// has fully initialized the selected driver.console.log(localforage.driver()); // LocalStorage
}).catch(function (e) {console.log(e); // No available storage method found.// One of the cases that ready() rejects,// is when no usable storage driver is found
});
//删除指定实例
localforage.dropInstance({name: otherName
}).then(function() {console.log(Dropped otherName database).
});
参考https://localforage.github.io/localForage/#localforage
参考https://github.com/xmoyking/localForage-cn 在vue中使用
1.安装依赖
npm install --save localforage vlf
2.引入依赖
//在main.js中引入
import Vlf from vlf
import localforage from localforage
Vue.use(Vlf, localforage)
3.使用插件存取数据
// 创建实例
this.$vlf.createInstance({storeName: user
})
// 迭代
this.$vlf.iterate((value, key, num) {console.log(key);
});
// 设置值
this.$vlf.setItem(test, hello).then(v {console.log(v);
});
//其他和官方使用一致
参考https://github.com/dmlzj/vlf
