H5 技术

时间：2016-01-01 11:09:35 阅读：236 评论：0 收藏：0 [点我收藏+]

1,HTML5预加载标签

2,存储功能 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‘];

}

IndexedDB

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‘);
        }         
    };
 
}
最古老的存储方式为Cookie
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";   
    }
}s
3,HTML5 离线存储实战之manifest  更新时要修改文件

<!DOCTYPE html>
<html manifest="list.appcache">
CACHE MANIFEST
# VERSION 0.3

# 直接缓存的文件
CACHE:

# 需要在线访问的文件
NETWORK:
*
# 替代方案
FALLBACK:

H5 技术

原文：http://www.cnblogs.com/jayruan/p/5093070.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)