今天在學習《高級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();