码迷,mamicode.com
首页 > Web开发 > 详细

基于 HTML5 的数据存储

时间:2016-10-07 20:38:47      阅读:253      评论:0      收藏:0      [点我收藏+]

标签:

以前想做个静态网页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)

 

基于 HTML5 的数据存储

标签:

原文地址:http://www.cnblogs.com/sy4w/p/5936436.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!