随笔- 35 文章- 1 评论- 9 阅读- 45053

页面缓存、离线存储技术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>