基于 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）