- 在HTML頁面上的html tag 裡加上manifest="~/cache.appcache",這個檔案是參考亞斯狼的教學,利用MVC去產生需要被快取的檔案,包含html、js、css,結構如下
CACHE MANIFEST
#V1.0
需要快取檔案的相對路徑
NETWORK:
需要連線的檔案相對路徑
FALLBACK:
允許將用戶轉入一個指定的頁面
- 原則上只要簡單的頁面上面這樣設定就可以了,那如果要應付較複雜的表單就要在利用前端的資料存取,最簡單的就是使用LoaclStorage及SessionStorage,相容性也高,離線存取用LocalStorage比較適合,畢竟可以一直存在電腦裡,SessionStorage只要關掉瀏覽器資料就會清掉了,但因本次的專案有比較複雜,要有模擬AJAX取資料的動作,因為Storage只能存字串,再某些情況下變得很不好用,所以這邊我用IndexedDB來當我的前台資料庫。
- IndexedDB原則上是非同步的方式在處理資料,一開始在寫他的方法時還遇到蠻多問題,對JS的非同步不太熟^_^;;;,程式碼如下,基本上簡單的資料庫存取都可以。
var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB; var IDBTransaction = window.IDBTransaction || window.webkitTransaction || window.msIDBTransaction || { READ_WRITE: "readwrite" }; var AccountDB; // function DBClass(tableName, columns) { this.TableName = tableName; this.Columns = columns; this.DBObject = undefined; } DBClass.prototype.CreateTable = function () { var that = this; var request = indexedDB.open(that.TableName); // request.onsuccess = function () { that.DBObject = request.result; }; request.onerror = function (event) { console.log("IndexedDB error: " + event.target.errorCode); }; request.onblocked = function (event) { console.log("IndexedDB on blocked"); event.target.result.close(); }; request.onupgradeneeded = function (event) { var hasKey; var objectStore; //var tableName = that.TableName; // if (that.Columns) { hasKey = that.Columns.some(function (element, index, array) { if (element.Key) { objectStore = event.currentTarget.result.createObjectStore(that.TableName, { keyPath: element.ColumnName, autoIncrement: true }); return true; } else { return false; } }); if (!hasKey) { objectStore = event.currentTarget.result.createObjectStore(that.TableName, { keyPath: "SerialNumber", autoIncrement: true }); } that.Columns.forEach(function (element, index, array) { if (!element.Key) { objectStore.createIndex(element.ColumnName, element.ColumnName, { unique: element.Unique }); } }); } }; }; DBClass.prototype.AddData = function (columnsValueArray) { var transaction = this.DBObject.transaction(this.TableName, "readwrite"); var objectStore = transaction.objectStore(this.TableName); var request; var columnsObject = {}; columnsValueArray.forEach(function (element, index, array) { columnsObject[element.ColumnName] = element.Value; }); request = objectStore.add(columnsObject); // request.onsuccess = function (event) { console.log("data save success!"); }; request.onerror = function (event) { console.log("data save error!"); }; }; DBClass.prototype.UpdateData = function (columnsValueArray) { var transaction = this.DBObject.transaction(this.TableName, "readwrite"); var objectStore = transaction.objectStore(this.TableName); var request; var columnsObject = {}; columnsValueArray.forEach(function (element, index, array) { columnsObject[element.ColumnName] = element.Value; }); request = objectStore.put(columnsObject); // request.onsuccess = function (event) { console.log("data update success!"); }; request.onerror = function (event) { console.log("data update error!"); }; }; DBClass.prototype.DeleteData = function (keyValue) { var transaction = this.DBObject.transaction(this.TableName, "readwrite"); var objectStore = transaction.objectStore(this.TableName); var request; request = objectStore.delete(keyValue); request.onsuccess = function (event) { console.log("data delete success!"); }; request.onerror = function (event) { console.log("data delete error!"); }; }; DBClass.prototype.GetData = function (keyValue, getFunc) { var transaction = this.DBObject.transaction(this.TableName); var objectStore = transaction.objectStore(this.TableName); var request; request = objectStore.get(keyValue); objectStore.op // request.onsuccess = function (event) { if (getFunc) { getFunc(event.target.result); } }; request.onerror = function (event) { console.log("data search error!"); }; }; DBClass.prototype.GetAll = function (getFunc) { var transaction = this.DBObject.transaction(this.TableName); var objectStore = transaction.objectStore(this.TableName); var cursor = objectStore.openCursor(); // cursor.onsuccess = function (event) { if (getFunc) { getFunc(event.target.result); } }; }; DBClass.prototype.DropTable = function () { if (this.DBObject) { this.DBObject.close(); } var request = indexedDB.deleteDatabase(this.TableName); request.onsuccess = function () { console.log("Delete database successfully"); }; request.onerror = function () { console.log("Delete database error"); }; request.onblocked = function (event) { console.log("Database is on blocked, it's can't delete"); }; }; var ColumnInfoClass = function (columnName, key, unique) { this.ColumnName = columnName; this.Key = key === undefined ? false : key; this.Unique = unique === undefined ? false : unique; }; var ColumnValueClass = function (columnName, value) { this.ColumnName = columnName; this.Value = value; }; function TestDB() { var columns = []; columns.push(new ColumnInfoClass("ID", true, true)); columns.push(new ColumnInfoClass("Name")); columns.push(new ColumnInfoClass("Phone")); AccountDB = new DBClass("Account", columns); AccountDB.CreateTable(); } function AddDB() { var values = []; values.push(new ColumnValueClass("ID", 1)); values.push(new ColumnValueClass("Name", "測試新增")); values.push(new ColumnValueClass("Phone", "123456")); // AccountDB.AddData(values); } function UpdateDB() { var values = []; values.push(new ColumnValueClass("ID", 1)); values.push(new ColumnValueClass("Name", "測試修改")); values.push(new ColumnValueClass("Phone", "654321")); // AccountDB.UpdateData(values); } function DeleteDB() { AccountDB.DeleteData(1); } function GetDB() { AccountDB.GetData(1, function (request) { if (request) { console.log(request.Name + "_" + request.Phone); } else { console.log("No Data!"); } }); } function GetAll() { AccountDB.GetAll(function (request) { if (request) { console.log(request.value.Name); request.continue(); } }); }
2017年2月3日 星期五
網頁離線存取IndexedDB
因為客戶的需求必須要有離線做資料登打,後續再做資料上傳,雖然最後又不要使用,但我還是研究了一下把做法記下來
訂閱:
張貼留言
(
Atom
)
好一目了然喔
回覆刪除雖然我看不懂,但你好用心喔(崇拜ing