基於 HTML5 的數據存儲

之前想作個靜態網頁APP。最初的思路是用本地文件存儲數據，後來發如今手機上運行時，文件沒法找到。

通過了長達幾個月的搜索（實際也就幾天），沒有找到合適的方法。

就在絕望的時候，無心間搜到基於HTML5的各類保存數據的方法。在此簡單與你們分享一下。

前四種是從http://www.hightopo.com/blog/344.html截取。

Cookie

最古老的存儲方式爲Cookie，這種存儲方式存儲內容頗有限，只適合作簡單信息存儲，存取接口設計得極其反人類，爲了介紹HTML5存儲方案的完整性我順便把他給列上：

function getCookieValue(name) {
    if (document.cookie.length > 0) {
        var start = document.cookie.indexOf(name + "=");
        if (start !== -1) {
            start = start + name.length + 1;
            var end = document.cookie.indexOf(";", start);
            if (end === -1){
                end = document.cookie.length;
            }
            return unescape(document.cookie.substring(start, end));
        }
    }
    return '';
}
function save(dataModel) {
    var value = dataModel.serialize();
    document.cookie = 'DataModel=' + escape(value);
    document.cookie = 'DataCount=' + dataModel.size();   
    console.log(dataModel.size() + ' datas are saved');
    return value;
}
function restore(dataModel){ 
    var value = getCookieValue('DataModel');
    if(value){
        dataModel.deserialize(value);
        console.log(getCookieValue('DataCount') + ' datas are restored');
        return value;
    }   
    return '';
}
function clear() {
    if(getCookieValue('DataModel')){
        console.log(getCookieValue('DataCount') + ' datas are cleared');
        document.cookie = "DataModel=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
        document.cookie = "DataCount=; expires=Thu, 01 Jan 1970 00:00:00 UTC";  
    }
}

 

LocalStorage

最簡單的存儲方式LocalStorage，李勇Key-Value的簡單鍵值對存儲結構，Web Storage除了localStorage的持久性存儲外，還有針對本次回話的sessionStorage方式，通常狀況下localStorage較爲經常使用，更多可參考 http://www.w3.org/TR/webstorage/

function save(dataModel){
    var value = dataModel.serialize();
    window.localStorage['DataModel'] = value;
    window.localStorage['DataCount'] = dataModel.size();
    console.log(dataModel.size() + ' datas are saved');
    return value;
}
function restore(dataModel){ 
    var value = window.localStorage['DataModel'];
    if(value){
        dataModel.deserialize(value);
        console.log(window.localStorage['DataCount'] + ' datas are restored');
        return value;
    }   
    return '';
}
function clear(){
    if(window.localStorage['DataModel']){
        console.log(window.localStorage['DataCount'] + ' datas are cleared');
        delete window.localStorage['DataModel'];
        delete window.localStorage['DataCount'];        
    }  
}

Indexed Database 

Indexed Database，也可簡稱爲 IndexedDB（之前被稱做 WebSimpleDB），一樣是一個 Web 客戶端存儲結構化數據的規範，在 2009 年由 Oracle 提出。

若是說 Web SQL Databae 在客戶端實現了 傳統的 SQL 數據庫操做，那麼 Indexed Database 更相似於 NoSQL 的形式來操做數據庫 , 其中最重要的是 Indexed Database 不使用 SQL 做爲查詢語言。

其數據存儲能夠不須要固定的表格模式，也常常會避免使用 SQL 的 JOIN 操做，而且通常具備水平可擴展性。

目前 W3C 官方也把焦點 投到對 Indexed Database 規範的制定當中來，而 Microsoft 和 Mozilla 是對這個規範重要的兩個推進者，Firefox 4 以上已經部分實現了 Indexed DB API，而且 IE 10 中也將實現 Indexed DB API。因爲在手機等移動設備的瀏覽器中都沒有實現 Indexed DB API，因此其還有必定的侷限性，但這並不妨礙它做爲將來的 HTML5 的焦點而存在。

request = indexedDB.open("DataModel"); 
request.onupgradeneeded = function() {  
    db = request.result; 
    var store = db.createObjectStore("meters", {keyPath: "id"}); 
    store.createIndex("by_tag", "tag", {unique: true}); 
    store.createIndex("by_name", "name");  
}; 
request.onsuccess = function() { 
    db = request.result; 
}; 
function save(dataModel){ 
    var tx = db.transaction("meters", "readwrite"); 
    var store = tx.objectStore("meters"); 
    dataModel.each(function(data){ 
        store.put({ 
            id: data.getId(), 
            tag: data.getTag(), 
            name: data.getName(), 
            meterValue: data.a('meter.value'), 
            meterAngle: data.a('meter.angle'), 
            p3: data.p3(), 
            r3: data.r3(), 
            s3: data.s3() 
        });    
    });   
    tx.oncomplete = function() { 
        console.log(dataModel.size() + ' datas are saved'); 
    };    
    return dataModel.serialize(); 
} 
function restore(dataModel){     
    var tx = db.transaction("meters", "readonly"); 
    var store = tx.objectStore("meters"); 
    var req = store.openCursor();  
    var nodes = []; 
    req.onsuccess = function() {        
        var res = req.result; 
        if(res){ 
            var value = res.value; 
            var node = createNode(); 
            node.setId(value.id); 
            node.setTag(value.tag); 
            node.setName(value.name);                        
            node.a({ 
                'meter.value': value.meterValue, 
                'meter.angle': value.meterAngle 
            }); 
            node.p3(value.p3);                    
            node.r3(value.r3); 
            node.s3(value.s3); 
            nodes.push(node);             
            res.continue(); 
        }else{ 
            if(nodes.length){
                dataModel.clear();
                nodes.forEach(function(node){
                    dataModel.add(node);                        
                });
                console.log(dataModel.size() + ' datas are restored');
            }            
        }      
    };   
    return '';
}
function clear(){
    var tx = db.transaction("meters", "readwrite");
    var store = tx.objectStore("meters");
    var req = store.openCursor();
    var count = 0;
    req.onsuccess = function(event) {       
        var res = event.target.result;
        if(res){
            store.delete(res.value.id);
            res.continue();
            count++;
        }else{
            console.log(count + ' datas are cleared');
        }        
    };
}

 

瀏覽器支持

支持：IE（10.0）FireFox（4.0~12.0）Chrome（10.0~18.0）

不支持：IE（6.0~9.0）Safari（3.1~6.0）Opera（10.5~12.0）iOS Safari（3.2~5.0）Android Browser（2.1~4.0）

FileSystem API

至關於操做本地文件的存儲方式，目前支持瀏覽器很少，其接口標準也在發展制定變化中，例如在這個代碼時大部分文獻使用的webkitStorageInfo已被navigator.webkitPersistentStorage和navigator.webkitTemporaryStorage替代，

存儲的文件可經過filesystem:http://www.hightopo.com/persistent/meters.txt’的URL方式在chrome瀏覽器中查找到，

甚至可經過filesystem:http://www.hightopo.com/persistent/相似目錄的訪問，所以也能夠動態生成圖片到本地文件，

而後經過filesystem:http:***的URL方式直接賦值給img的html元素的src訪問，所以本地存儲打開了一扇新的門，相信之後會冒出更多稀奇古怪的奇葩應用。

navigator.webkitPersistentStorage.queryUsageAndQuota(function (usage, quota) { 
        console.log('PERSISTENT: ' + usage + '/' + quota + ' - ' + usage / quota + '%'); 
    } 
); 
navigator.webkitPersistentStorage.requestQuota(2 * 1024 * 1024, 
    function (grantedBytes) { 
        window.webkitRequestFileSystem(window.PERSISTENT, grantedBytes, 
            function (fs) { 
                window.fs = fs; 
            }); 
    } 
); 
function save(dataModel) { 
    var value = dataModel.serialize(); 
    fs.root.getFile('meters.txt', {create: true}, function (fileEntry) { 
        console.log(fileEntry.toURL()); 
        fileEntry.createWriter(function (fileWriter) { 
            fileWriter.onwriteend = function () { 
                console.log(dataModel.size() + ' datas are saved'); 
            }; 
            var blob = new Blob([value], {type: 'text/plain'}); 
            fileWriter.write(blob); 
        }); 
    }); 
    return value; 
} 
function restore(dataModel) { 
    fs.root.getFile('meters.txt', {}, function (fileEntry) { 
        fileEntry.file(function (file) { 
            var reader = new FileReader(); 
            reader.onloadend = function (e) { 
                dataModel.clear(); 
                dataModel.deserialize(reader.result); 
                console.log(dataModel.size() + ' datas are restored'); 
            }; 
            reader.readAsText(file); 
        }); 
    }); 
    return ''; 
} 
function clear() { 
    fs.root.getFile('meters.txt', {create: false}, function(fileEntry) { 
        fileEntry.remove(function() { 
            console.log(fileEntry.toURL() + ' is removed'); 
        }); 
    });   
}

 Web SQL Database

HTML5 的 Web SQL Database 用本地和會話存儲實現簡單的對象持久化。

對於 HTML5，也許最有用的就是它新推出的「Web Storage」 API。對於簡單的鍵值對（好比應用程序設置）或簡單對象（如應用程序狀態）進行存儲，使用本地和會話存儲可以很好地完成，可是對繁瑣的關係數據進行處理的時候，它就力所不及了，而這正是 HTML5 的「Web SQL Database」 API 藉口的應用所在。

但W3C 官方在 2011 年 11 月聲明已經再也不維護 Web SQL Database 規範。

若是說 Web SQL Databae 在客戶端實現了 傳統的 SQL 數據庫操做，那麼 Indexed Database 更相似於 NoSQL 的形式來操做數據庫 , 其中最重要的是 Indexed Database 不使用 SQL 做爲查詢語言。

目前 W3C 官方也把焦點 投到對 Indexed Database 規範的制定當中來，而 Microsoft 和 Mozilla 是對這個規範重要的兩個推進者，Firefox 4 以上已經部分實現了 Indexed DB API，而且 IE 10 中也將實現 Indexed DB API。因爲在手機等移動設備的瀏覽器中都沒有實現 Indexed DB API，因此其還有必定的侷限性，但這並 不妨礙它做爲將來的 HTML5 的焦點而存在。

詳細信息在其它文中說明。

  

瀏覽器支持

支持：FireFox（4.0~12.0）Chrome（10.0~18.0）Safari（3.1~6.0）Opera（10.5~12.0）iOS Safari（3.2~5.0）Android Browser（2.1~4.0）

不支持：IE（6.0~10.0）