本地存储数据库indexedDB实现离线预览的功能
今天在学习《高级JS编程》，看到离线存储，cookie和session都十分的熟悉，但是书中还提到了indexedDB和webSQL（已废弃），indexedDB可以像mysql一样建表，这就很有趣了，可以把后台获取来的数据统一放到indexedDB里面，那么即使断开连接，也能实现离线预览的功能啊，对于indexedDB的内容，这位博主的博客写的十分的详细，强烈推荐：https://www.cnblogs.com/dolphinX/p/3415761.html
好了，言归正传，开始我们的离线预览之旅吧：
1.准备一张sql的表，我建立了一个名为user的表，如下：
我们现在要做的功能是查找表里带id字段的内容然后存到indexedDB里面，再从indexDB里面进行取值
2.ajax进行取值运算：
html代码：
let arr = [];
/****ajax获取mysql数据库****/
function result() {
function Submit(url) {
const Promises = new Promise(function (resolve, reject) {
const handler = function () {
if (this.readyState !== 4) {
return;
}
if (this.status === 200) {
resolve(this.response);
} else {
reject(new Error(this.statusText));
}
};
const xrh = new XMLHttpRequest();
let formData = new FormData();
formData.append("id", "id");
xrh.onload = handler;
xrh.open("post", url);
xrh.responseType = "json";
xrh.send(formData);
});
return Promises;
}
Submit("./select.php").then(
function (data) {
for (let i in data) {
arr.push(eval("(" + data[i] + ")"))
}
}, function (error) {
console.log("错误为：", error)
}
)
};
result();
如上，楼主习惯使用es6的语法，所以看不懂的童鞋可以先去看一下es6，阮一峰的《ECMAscript6入门》特别详细，奉上连接：http://es6.ruanyifeng.com/#docs/intro；如果你不想使用es6的promise语法，那么你可以使用$.ajax来获取，都是一样的。看上面代码，我们首先定义一个空数组，然后把获取来的内容push到数组里面，千万不要忘记了eval转换类型，因为后台返回的都是字符串类型
3.php进行sql查询：
php代码如下
function postData($key,$default = ""){
return trim(isset($_REQUEST[$key])?$_REQUEST[$key]:$default);
}
$id = postData("id");
$conn = mysqli_connect("localhost", "root", "", "test") or die("连接失败");
$conn->query("set names utf8");
$sql = "select * from user where ".$id." is not null";
$result = $conn->query($sql);
$arr = array();
while ($row = $result->fetch_assoc()) {
array_push($arr,json_encode($row));
}
print_r(json_encode($arr));
$conn->close();
同样把表里面查询到的数据转换成json格式，然后放到一个数组里面，那么我们来看一下arr数组里面现在又什么东西吧：
全部得到了，那么下一步我们把这些数据保存到indexedDB里面，代码如下：
let myDB = {
name: "test", version: 1, db: null
};
/***本地存储数据库的方法***/
function indexedDB(user) {
/**创建数据库**/
function openDB(name) {
let version = 1;
let request = window.indexedDB.open(name, version);
request.onerror = function (e) {
console.log(e.currentTarget.error.message);
};
request.onsuccess = function (e) {
myDB.db = e.target.result;
};
request.onupgradeneeded = function (e) {
let db = e.target.result;
if (!db.objectStoreNames.contains("students")) {
db.createObjectStore("students", {keyPath: "id"});
}
console.log('DB version changed to ' + version);
};
}
let students = user;
/*向数据库里面添加数据*/
function addData(db, storeName) {
let transaction = db.transaction(storeName, 'readwrite');
let store = transaction.objectStore(storeName);
for (let i = 0; i < students.length; i++) {
store.add(students[i]);
}
}
openDB(myDB.name);
setTimeout(function () {
addData(myDB.db, "students");
}, 1000);
}
/*执行查询的方法*/
indexedDB(arr);
看这段代码之前一定要先去了解indexedDB，不然都是徒劳的，上面的博主里面的文章里面已经阐述的很详细了，不再多说，这个时候我们在indexedDB里面已经创建了一个test的库，库里面有一个students的表，表的key是id，如下：
那么我们在indexedDB里面有了值，下一步就是取值了，我想点击button的时候在div里面显示id为1的值，好，代码如下：
html结构：
<p>从本地数据库里面读取的内容</p> <div> </div> <button>读取内容触发器</button>
js代码：
/**本地数据库的查询**/
function getDataByKey(db, storeName, value, cb) {
let transaction = db.transaction(storeName, 'readwrite');
let store = transaction.objectStore(storeName);
let request = store.get(value);
request.onsuccess = cb;
}
$("button").click(() => {
getDataByKey(myDB.db, "students", "1", function (e) {
let text = e.target.result;
let content = "";
for (let i in text) {
content += `${i}为${text[i]};`
}
$("div").text(content)
});
});
在这里博主曾经犯了个小错误，由于onsuccess是回调函数，是异步操作，我却想实现作用域的提升，真是愚蠢至极，公司老大说建议我用promise语法，但是一直没成功，希望有会的童鞋可以帮小小白解决一下，我们现在点击按钮：效果如下：
此时的一个简单的离线预览已经做完啦，现在就算是吧ajax请求数据的方法删除也好不影响我们的预览。因为是离线的呀！
汇总代码：
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>indexedDB</title>
<script src="http://static.mschool.cn/jquery/latest/jquery.min.js"></script>
</head>
<body>
<p>从本地数据库里面读取的内容</p>
<div>
</div>
<button>读取内容触发器</button>
</body>
<script>
$(function () {
let myDB = {
name: "test", version: 1, db: null
};
let arr = [];
/***本地存储数据库的方法***/
function indexedDB(user) {
/**创建数据库**/
function openDB(name) {
let version = 1;
let request = window.indexedDB.open(name, version);
request.onerror = function (e) {
console.log(e.currentTarget.error.message);
};
request.onsuccess = function (e) {
myDB.db = e.target.result;
};
request.onupgradeneeded = function (e) {
let db = e.target.result;
if (!db.objectStoreNames.contains("students")) {
db.createObjectStore("students", {keyPath: "id"});
}
console.log('DB version changed to ' + version);
};
}
let students = user;
/*向数据库里面添加数据*/
function addData(db, storeName) {
let transaction = db.transaction(storeName, 'readwrite');
let store = transaction.objectStore(storeName);
for (let i = 0; i < students.length; i++) {
store.add(students[i]);
}
}
openDB(myDB.name);
setTimeout(function () {
addData(myDB.db, "students");
}, 1000);
}
/**本地数据库的查询**/
function getDataByKey(db, storeName, value, cb) {
let transaction = db.transaction(storeName, 'readwrite');
let store = transaction.objectStore(storeName);
let request = store.get(value);
request.onsuccess = cb;
}
/****ajax获取mysql数据库****/
function result() {
function Submit(url) {
const Promises = new Promise(function (resolve, reject) {
const handler = function () {
if (this.readyState !== 4) {
return;
}
if (this.status === 200) {
resolve(this.response);
} else {
reject(new Error(this.statusText));
}
};
const xrh = new XMLHttpRequest();
let formData = new FormData();
formData.append("id", "id");
xrh.onload = handler;
xrh.open("post", url);
xrh.responseType = "json";
xrh.send(formData);
});
return Promises;
}
Submit("./select.php").then(
function (data) {
for (let i in data) {
arr.push(eval("(" + data[i] + ")"))
}
}, function (error) {
console.log("错误为：", error)
}
)
};
result();
indexedDB(arr);
$("button").click(() => {
getDataByKey(myDB.db, "students", "1", function (e) {
let text = e.target.result;
let content = "";
for (let i in text) {
content += `${i}为${text[i]};`
}
$("div").text(content)
});
});
})
</script>
</html>
php:
<?php
/**
* Created by PhpStorm.
* User: DELL
* Date: 2017/12/6
* Time: 16:16
*/
function postData($key,$default = ""){
return trim(isset($_REQUEST[$key])?$_REQUEST[$key]:$default);
}
$id = postData("id");
$conn = mysqli_connect("localhost", "root", "", "test") or die("连接失败");
$conn->query("set names utf8");
$sql = "select * from user where ".$id." is not null";
$result = $conn->query($sql);
$arr = array();
while ($row = $result->fetch_assoc()) {
array_push($arr,json_encode($row));
}
print_r(json_encode($arr));
$conn->close();
