HTML5系列：HTML5本地儲存

libingql發表於2015-04-20
HTML

1. Web Storage儲存

　　HTML4在客戶端儲存資料通常使用Cookie儲存機制將資料儲存在使用者的客戶端，但使用Cookie方式儲存客戶端資料存在一系列的制約發展因素，如限制儲存資料空間大小、資料安全性差等。

　　HTML5中新增兩種資料儲存方式：Web Storage和Web SQL Database。前者可用於臨時或永久儲存客戶端的少量資料，後者是客戶端本地化的一套資料庫系統，可以將大量的資料儲存在客戶端，而無需與伺服器互動。

　　Web Storage頁面儲存根據Web Storage API區分會話資料與長期資料，相應的API型別分為兩種：

　　sessionStorage（儲存會話資料）

　　localStorage（在客戶端長期儲存資料）

　　兩者的區別在於sessionStorage為臨時儲存，localStorage為永久儲存。

1.1 sessionStorage物件

　　sessionStorage物件儲存資料實質的儲存在session物件中，使用者在開啟瀏覽器時，可以檢視操作過程中要求的臨時資料，一旦關閉瀏覽器，所有使用sessionStorage物件儲存的資料都將會丟失。

　　sessionStorage物件儲存資料：

sessionStorage.setItem(key, value);

其中，key表示儲存資料的鍵名，value表示儲存資料的鍵值。

　　sessionStorage物件讀取資料：

sessionStorage.getItem(key)

其中，key表示儲存資料的鍵名，該方法將返回一個指定鍵名的鍵值，如果不存在，則返回null。

1.2 localStorage物件

　　sessionStorage物件只能儲存使用者臨時的會話資料，關閉瀏覽器後，資料都將丟失。localStorage物件可以將資料長期儲存在客戶端，直至人工清除為止。

　　localStorage物件儲存資料：

localStorage.setItem(key, value)

其中，key表示儲存資料的鍵名，value表示儲存資料的鍵值。

　　localStorage物件讀取資料：

localStorage.getItem(key)

其中，key表示儲存資料的鍵名，該方法將返回一個指定鍵名的鍵值，如果不存在，則返回null。

　　localStorage物件刪除資料：

localStorage.removeItem(key)

其中，key表示要刪除的儲存資料的鍵名。

　　清空localStorage物件資料：

localStorage.clear()

　　該方法無引數，表示清空全部的資料。

　　遍歷localStorage資料：

　　遍歷localStorage物件儲存的資料，需要使用localStorage物件的兩個屬性：length與key。length表示localStorage物件中儲存資料的總條數，key表示儲存資料時的鍵名，key常與索引號(index)配合使用，表示第幾條鍵名對應的資料記錄。其中，索引號(index)從0開始。

for (var index =0; index < localStorage.length; index++) {
    var key = localStorage.key(index);
    var value = localStorage.getItem(key);
}

　　使用JSON物件存取資料：

　　在HTML5中可以通過localStorage資料與JSON物件進行轉換，如果要將localStorage物件資料轉換成JSON物件，需要呼叫JSON物件的parse()方法。

JSON.parse(data);

其中，data表示localStorage物件獲取的資料，呼叫該方法將返回一個裝載data資料的JSON物件。可以使用stringify()方法將一個實體物件轉換為JSON格式的文字資料。

JSON.stringify(data);

其中，data表示任意的實體物件，呼叫該方法將返回一個由實體物件轉換成JSON格式的文字資料集。

　　示例

var userdata = new Object();
userdata.UserName = 'UserName';
userdata.Password = 'Password';
var struserdata = JSON.stringify(userdata);
localStorage.setItem('user', struserdata);

2. Web SQL資料庫

　　Web Storage儲存空間只有5MB，僅提供鍵值儲存的方式。Web SQL資料庫（Web SQL DataBase， WebDB）內建SQLite資料庫，對資料庫的操作可以通過呼叫executeSql()方法來實現，允許使用JavaScript程式碼進行資料庫操作。

2.1 開啟與建立資料庫

　　通過WebD版進行本地資料的儲存，需要先開啟或建立一個資料庫，開啟或建立資料庫的API呼叫程式碼格式：

openDatabase(DBName, DBVersion, DBDescribe, DBSize, Callback());

其中，DBName表示資料庫名稱，DBVersion表示版本號，DBDescribe表示對資料庫的描述，DBSize表示資料庫的大小，單位為位元組，如果是2MB，寫成2*1024*1024，Callback()表示建立或開啟資料庫成功之後執行的一個回撥函式。

　　呼叫該方法時，如果指定的資料庫名存在，則開啟該資料庫；否則，新建立一個指定名稱的空資料庫。

　　示例：

var db = openDatabase("MyDB", "1.0", "My Web Database", 2 * 1024 * 1024, function () {
    document.getElementById("result").innerHTML = "資料庫建立成功！";
});

2.2 執行事務

　　在開啟/建立資料庫之後，可以使用資料庫物件中的transaction()方法執行事務處理。每一個事務處理請求都作為資料庫的獨立操作，避免在處理資料時發生衝突。呼叫的語法格式：

transaction(TransCallback, ErrorCallback, SuccessCallback);

其中，TransCallback表示事務回撥函式，可以寫入需要執行的SQL語句；ErrorCallback表示執行SQL語句出差時的回撥函式，SuccessCallback表示執行SQL語句成功時的回撥函式。

　　示例：

var db = openDatabase("MyDB", "1.0", "My Web Database", 2 * 1024 * 1024);
if (db) {
    var strSql = "create table if not exists User(UserID unique, UserName text, Password text)";
    db.transaction(function (tx) {
        tx.executeSql(strSql);
    }, function () {
        document.getElementById("result").innerHTML = "事務執行失敗！";
    }, function () {
        document.getElementById("result").innerHTML = "事務執行成功！";
    })
}

2.3 插入資料

　　執行SQL語句的executeSql()方法，呼叫格式：

executeSql(strSQL, [Arguments], SuccessCallback, ErrorCallback);

其中，strSQL表示需要執行的SQL語句， Arguments表示語句需要的引數，SuccessCallback表示SQL語句執行成功時的回撥函式，ErrorCallback表示SQL執行出錯時的回撥函式。

　　在使用executeSql()方法執行SQL語句時，允許使用“?”作為語句中的形參，與形參對應的實參放置在第二個引數Arguments中。

　　示例：

executeSql("insert into User values (?,?,?)", ["1", "TestUserName", "TestPassword"]);
var db = openDatabase("MyDB", "1.0", "My Web Database", 2 * 1024 * 1024);
if (db) {
    var strSql = "insert into User values (?, ?, ?)";
    db.transaction(function (tx) {
        tx.executeSql(strSql, [
            document.getElementById("txtUserID").value,
            document.getElementById("txtUserName").value,
            document.getElementById("txtPassword").value
        ]);
    }, function () {
        document.getElementById("txtUserID").value = "";
        document.getElementById("txtUserName").value = "";
        document.getElementById("txtPassword").value = "";
        document.getElementById("result").innerHTML = "一條記錄新增成功！";
    }, function (tx, ex) {
        document.getElementById("result").innerHTML = ex.message;
    })
}

相關文章