基于 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 规范。

详细信息在其它文中说明。

浏览器支持

支持：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）

时间： 2024-08-06 07:55:42

基于 HTML5 的数据存储

Cookie

LocalStorage

Indexed Database

浏览器支持

FileSystem API

Web SQL Database

浏览器支持

基于 HTML5 的数据存储的相关文章

基于HTML5的数据可视化实现方法解读

[HTML5]　数据存储

cocos2d-html5开发之本地数据存储

万亿级日志与行为数据存储查询技术剖析——Hbase系预聚合方案、Dremel系parquet列存储、预聚合系、Lucene系

HTML5数据存储

html5 之本地数据存储

基于HTML5 Bootstrap搭建的后台模板，分页，模糊查询已经全部JS实现，无需编码，嵌入数据即可开发，内置8款皮肤，欧美风格，非常好用！

Html5——WEB(客户端)数据存储

基于Html5 Plus + Vue + Mui 移动App开发（三）-文件操作（读取、保存、更新数据）