# localForage

localForage 有一个优雅降级策略,若浏览器不支持 IndexedDB 或 WebSQL,则使用 localStorage。在所有主流浏览器中都可用:Chrome,Firefox,IE 和 Safari(包括 Safari Mobile)。

websql已经被最新版谷歌移除了

# getItem

getItem(key, successCallback)

从仓库中获取 key 对应的值并将结果提供给回调函数。如果 key 不存在,getItem() 将返回 null。

# setItem

setItem(key, value, successCallback)
<html>
  <head>
    <meta charset="utf8" />
    <title>LocalForage Example Pen</title>
  </head>
  <body>
    <h1>LocalForage Example Pen</h1>
    <ul id="htmlConsole" class="logList"></ul>
    <script src="./localforage.js"></script>
  </body>
</html>
<script type="text/javascript">
let  arr=[1,2,3,4]
localforage.setItem('somekey', arr).then(function (value) {
    // 当值被存储后,可执行其他操作
    console.log(value);
}).catch(function(err) {
    // 当出错时,此处代码运行
    console.log(err);
});

localforage.getItem("somekey").then(function(res){
	console.log(res)
}).catch(function(err){
	console.log(err)
})

localforage.removeItem("STORE_KEY").then(function(res){
	console.log(res)
}).catch(function(err){
	console.log(err)
})
</script>

# removeItem

localforage.removeItem("somekey").then(function(res){
	console.log(res)
}).catch(function(err){
	console.log(err)
})

# clear

清空

localforage.clear().then(function() {
    // 当数据库被全部删除后,此处代码运行
    console.log('Database is now empty.');
}).catch(function(err) {
    // 当出错时,此处代码运行
    console.log(err);
});

# length

获取离线仓库中的 key 的数量(即数据仓库的长度)。

localforage.length().then(function(numberOfKeys) {
    // 输出数据库的大小
    console.log(numberOfKeys);
}).catch(function(err) {
    // 当出错时,此处代码运行
    console.log(err);
});

# key

根据 key 的索引获取其名

localforage.key(0).then(function(res){
	console.log(res)
}).catch(function(err){
	console.log(err)
})

# keys

获取数据仓库中所有的 key。

localforage.keys().then(function(res){
	console.log(res)// ["todo", "todo1"]
}).catch(function(err){
	console.log(err)
})

# iterate

  1. value 为值 2. key 为键名 3. iterationNumber 为迭代索引 - 数字
iterate(iteratorCallback, successCallback)
localforage.setItem('array', [1, 2,'three']);
localforage.setItem('string', 'people');
localforage.setItem('number1', 5);
localforage.setItem('number2', 6);
localforage.iterate(function(value, key, iterationNumber) {
 if (iterationNumber < 2) {
		console.log([key, value]);
	} else {
		return [key, value];
	}
}).then(function(result) {
  console.log('Iteration has completed at '+ result);
}).catch(function(err) {
  console.log(err);
});
//["array", Array(3)]
//Iteration has completed at number1,5

# setDriver

setDriver(driverName)
setDriver([driverName, nextDriverName])

若可用,强制设置特定的驱动。

默认情况下,localForage 按照以下顺序选择数据仓库的后端驱动:

IndexedDB
WebSQL
localStorage

如果你想强制使用特定的驱动,可以使用 setDriver(),参数为以下的某一个或多个:

localforage.INDEXEDDB
localforage.WEBSQL
localforage.LOCALSTORAGE
// 强制设置 localStorage 为后端的驱动
localforage.setDriver(localforage.LOCALSTORAGE);

// 列出可选的驱动,以优先级排序
localforage.setDriver([localforage.WEBSQL, localforage.INDEXEDDB]);

# 多实例

可以创建多个 localForage 实例,且能指向不同数据仓库。所有 config 中的配置选项都可用。

# createInstance

创建并返回一个 localForage 的新实例。每个实例对象都有独立的数据库,而不会影响到其他实例。

var store = localforage.createInstance({
  name: "nameHere"
});

var otherStore = localforage.createInstance({
  name: "otherName"
});

// 设置某个数据仓库 key 的值不会影响到另一个数据仓库
store.setItem("key", "value");
otherStore.setItem("key", "value2");

# dropInstance

localforage.dropInstance().then(function() {
  console.log('Dropped the store of the current instance').
});

localforage.dropInstance({
  name: "otherName",
  storeName: "otherStore"
}).then(function() {
  console.log('Dropped otherStore').
});

localforage.dropInstance({
  name: "otherName"
}).then(function() {
  console.log('Dropped otherName database').
});

调用时,若不传参,将删除当前实例的 “数据仓库” 。

调用时,若参数为一个指定了 name 和 storeName 属性的对象,会删除指定的 “数据仓库”。

调用时,若参数为一个仅指定了 name 属性的对象,将删除指定的 “数据库”(及其所有数据仓库)。

最后更新: 5/23/2025, 12:43:53 PM