页面缓存、离线存储技术localforage(案例篇)
localforage案例使用
参考链接：https://localforage.docschina.org/
通过简单的案例使用，让大家可以快速上手使用localforage
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>离线存储localforage</title>
<script src="https://cdn.bootcss.com/localforage/1.7.3/localforage.min.js"></script>
</head>
<body>
<br>
<div id="s1" title="第1个存储的数据"></div>
<input type="text" id="t1" placeholder="请输入第1个要存储的数据">
<button type="button" onclick="t1()">点击存储</button>
<button type="button" onclick="remove1()">清除1个存储的数据</button>
<br><br><br>
<div id="s2" title="第2个存储的数据"></div>
<input type="text" id="t2" placeholder="请输入第2个要存储的数据">
<button type="button" onclick="t2()">点击存储</button>
<button type="button" onclick="remove2()">清除2个存储的数据</button>
<br>
<button type="button" onclick="tt()">显示存储的数据</button>
<br>
<button type="button" onclick="localclear()">清除所有存储的数据</button>
<button type="button" onclick="length()">获取离线仓库中的 key 的数量</button>
<button type="button" onclick="key()">根据 key 的索引获取其名</button>
<button type="button" onclick="keys()">获取数据仓库中所有的 key。</button>
<br>
<button type="button" onclick="vk()">迭代数据仓库中的所有 value/key 键值对。</button>
</body>
<script type="text/javascript">
function t1(){
let text = document.getElementById("t1").value;
localforage.setItem('t1', text).then(function (value) {
// 当值被存储后，可执行其他操作
console.log(value);
}).catch(function(err) {
// 当出错时，此处代码运行
console.log(err);
});
}
function t2(){
let text = document.getElementById("t2").value;
localforage.setItem('t2', text).then(function (value) {
// 当值被存储后，可执行其他操作
console.log(value);
}).catch(function(err) {
// 当出错时，此处代码运行
console.log(err);
});
}
function tt(){
let s1 = document.getElementById("s1");
let s2 = document.getElementById("s2");
localforage.getItem('t1').then(function(value) {
// 当离线仓库中的值被载入时，此处代码运行
console.log(value);
console.log(s1);
alert("第1个存储的数据"+value)
}).catch(function(err) {
// 当出错时，此处代码运行
console.log(err);
});
localforage.getItem('t2').then(function(value) {
// 当离线仓库中的值被载入时，此处代码运行
console.log(value);
alert("第2个存储的数据"+value)
}).catch(function(err) {
// 当出错时，此处代码运行
console.log(err);
});
}
function remove1(){
localforage.removeItem("t1")
alert("清除第1个数据")
}
function remove2(){
localforage.removeItem("t2")
alert("清除第2个数据")
}
function localclear(){
localforage.clear();
}
function length(){
localforage.length().then(function(numberOfKeys) {
// 输出数据库的大小
console.log(numberOfKeys);
alert("输出数据库的大小"+numberOfKeys)
}).catch(function(err) {
// 当出错时，此处代码运行
console.log(err);
});
}
function key(){
localforage.key(0).then(function(keyName) {
// key 名
console.log(keyName);
alert(keyName)
}).catch(function(err) {
// 当出错时，此处代码运行
console.log(err);
});
}
function keys(){
localforage.keys().then(function(keys) {
// 包含所有 key 名的数组
console.log(keys);
alert("包含所有 key 名的数组"+keys)
}).catch(function(err) {
// 当出错时，此处代码运行
console.log(err);
});
}
function vk(){
// 同样的代码，但使用 ES6 Promises
localforage.iterate(function(value, key, iterationNumber) {
// 此回调函数将对所有 key/value 键值对运行
console.log([key, value]);
alert("key:"+" "+key+" value:"+" "+value+" iterationNumber:"+iterationNumber)
})
}
</script>
</html>
