什么是LocalForage?
LocalForage是一个简单易用的JS库。它提供了一种跨浏览器的方式来进行本地数据存储。是基于IndexDB,WebSQL和localStorage 等浏览器本地存储API的封装库，通过类似localStorage API的异步存储来改进Web应用程序的离线体验。
优势
- 异步存储可以处理大量存储业务，不会阻塞主要进程。
- 可存储多种数据类型，对比localStorage,cookies,seesion 来看存储类型不只字符串，LocalForage可以直接存储和检索JavaScript对象、数组等复杂数据类型。
- 跨浏览器支持，主流浏览器中Chrome，Firefox，IE 和 Safari（包括 Safari Mobile）都可使用，但不兼容的浏览LocalForage有优雅的降级兼容策略若浏览器不支持indexDB或WebSQL则使用localStorage
- 存储容量，在不降级使用localStorage 的情况下可以处理大量数据。
- 数据共享：localStorage的数据仅限于当前域名下页面。而LocalForage 可以通过配置共享数据，使不同域名页面可以访问和共享存储数据。
LocalForage 使用
- 引入localForage
1.1npm安装
npm install localforage
引入
import localforage from 'localforage';
1.2直接引入
<script src="https://cdn.jsdelivr.net/npm/localforage@latest/dist/localforage.js"></script>
- 初始化配置 以下过程以vue中项目为例
js
localforage.config({
// driver: localforage.INDEXEDDB, 选择存储引擎，如IndexedDB 不写则自动按IndexedDB>>WebSQL>>localStorage降序
driver: [localforage.WEBSQL,
localforage.INDEXEDDB,
localforage.LOCALSTORAGE],
name: 'my-app', // 数据库名称
version: 1, // 数据库版本号 用于升级
storeName: 'my-store', // 存储对象的名称
size:'10000' //数据库大小（以字节为单位）只用于设置webSQL.默认值4980736
});挂载localforage 到vue全局
Vue.prototype.$localforage = localforage 初始化配置后可在浏览器存储看见数据库已新建
- 存入数据
setItem （key,value,callback) 可传入一个成功回调
javascript
this.$localforage.setItem('data', 222222222222222, () => {
console.log('set 成功 执行其他逻辑')
})- 获取数据
由于indexedDB的存取都是异步的，存取数据可以使用 promise.then() 或 async/await 去读值
eg:
js
async getVal(key) {
let value = await this.$localforage.getItem(key)
console.log(value, 'finish get dosomething')
}
或者
async getVal(key) {
this.$localforage.getItem(key).then(function (value) {
console.log(value, 'finish get dosomething')
}).catch(function (err) {
// we got an error
});
}- 删除数据
js
removeKey(key) {
this.$localforage.removeItem(key).then(() => {
console.log('Data removed successfully');
})
.catch((error) => {
console.error('Error removing data:', error);
});
},4.清空数据库
js
clearStore() {
this.$localforage
.clear()
.then(() => {
console.log('All data cleared')
})
.catch((error) => {
console.error('Error clearing data:', error)
})
}什么是IndexDB？
indexDB 是一个运行在浏览器的非关系型数据库
特点
- 键值对存储：indexDB内部采用对象仓库存放数据。所有类型的数据可以直接存入，在仓库里数据以键值对的形式进行保存，每个数据记录丢有对应的主键且主键独一无二。
- indexDB操作是异步操作，不会因同步任务较多锁死浏览器；用户操作indexDB时可进行其他操作，避免了大量读写操作时影响网页性能。
- 支持事务 ：indexDB支持在数据库操作失败后，事务取消数据库可回滚到之前的状态
- 同源限制 indexDB受同源限制，每个数据库对应创建它的域名。网页只能访问自身域名下的数据库不能跨域访问。
- 支持二进制存储:indexDB不仅可以存储字符串也可以存储二进制树
- 存储空间大，indexDB为数据库，大小不小于250M.
使用（以在vue组件中使用为例）
- 初始化
js
data() {
return {
db: null,
}
},
js
initDB() {
let that = this
// 创建数据库 名称
var request = window.indexedDB.open('databaseName')
request.onerror = function (event) {
// 错误处理
console.log(' 打开数据库报错')
}
request.onsuccess = function (event) {
// 成功处理
that.db = event.target.result
console.log('打开数据库成功')
}
// 更新监听 默认在初始化的时候调用 表已存在则更新，不存在则新建表格
request.onupgradeneeded = function (event) {
that.db = event.target.result
var objectStore = null
if (!that.db.objectStoreNames.contains('tableName')) {
objectStore = that.db.createObjectStore('tableName', { keyPath: 'id' })
// 创建索引 可以让你搜索任意字段 别名 》》属性名
objectStore.createIndex('name111', 'name', { unique: false })
},indexDB各方法为异步方法，可执行其他回调事件
- 存入数据
js
add (data, tableName) => {
const request = db.transaction([tableName], 'readwrite').objectStore(tableName).add(data);
return new Promise((resolve, reject) => {
request.onsuccess = function (event) {
console.log('数据写入成功');
resolve(event);
};
request.onerror = function (event) {
console.log('数据写入失败');
reject(event);
}
})
}- 查询数据
js
// 查
read(tableName, keyName) {
// 取到数据表
var objectStore = this.db.transaction([tableName]).transaction.objectStore(tableName)
// 用户读取数据，参数是主键
var request = objectStore.get(keyName)
return new Promise((resolve, reject) => {
request.onerror = function (event) {
reject(event);
}
request.onsuccess = function (event) {
resolve(request.result);
}
})
},- 数据更新
js
const update = (data, tableName ) => {
const request = db.transaction([tableName], 'readwrite')
.objectStore(tableName)
.put(data);
return new Promise((resolve, reject) => {
request.onsuccess = function (event) {
console.log('数据更新成功');
resolve(event);
};
request.onerror = function (event) {
console.log('数据更新失败');
reject(event);
}
})
}- 数据删除
js
const remove = (keyName , tableName ) => {
const request = db.transaction([tableName], 'readwrite')
.objectStore(tableName)
.delete(keyName);
return new Promise((resolve, reject) => {
request.onsuccess = function (event) {
console.log('数据删除成功');
resolve(true);
};
request.onerror = function (event) {
console.log('数据删除失败');
reject(event)
};
})
}- 查询数据使用索引
js
// 使用索引索引的意义在于，可以让你搜索任意字段，也就是说从任意字段拿到数据记录。如果不建立索引，默认只能搜索主键（即从主键取值）。假定新建表格的时候，对name字段建立了索引。
// 用索引的别名当参数
// 查询到第一个后返回
getDataByIndex(tableName, aliasName, parmaVal) {
var store = this.db.transaction([tableName], 'readwrite').objectStore(tableName)
// 以某个值为索引 并创建查询事务
var index = store.index(aliasName)
var request = index.get(parmaVal)
return new Promise((resolve, reject) => {
request.onsuccess = function (event) {
var result = event.target.result
resolve(result);
};
request.onerror = function (event) {
reject(event)
};
})
},