H5 技术

1,HTML5预加载标签

<!-- 页面，可以使用绝对或者相对路径 -->

<link rel="prefetch" href="page2.html" /> 
<!-- 图片，也可以是其他类型的文件 --> 
<link rel="prefetch" href="sprite.png" />

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  更新时要修改文件：manifest建立的缓存文件，不会被没有manifest的页面读取,浏览器检测到manifest文件有变化时，会更新缓存，但更新策略是先读取旧缓存显示出来，然后再更新。

<!DOCTYPE html>
<html manifest="m.appcache">

CACHE MANIFEST
# VERSION 0.3

# 直接缓存的文件
CACHE:
a.js
b.js

# 需要在线访问的文件
NETWORK:
*
# 替代方案
FALLBACK:
/x.css /test.css
四，datalist

<datalist id="words">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
<option value="Sogou">
<option value="Maxthon">
</datalist>

var head = document.head || document.getElementsByTagName('head')[0];

5,calc http://osvaldas.info/imitating-calc-fallback-fixed-width-sidebar-in-responsive-layout

width:calc(33.3333% - (10px + 5px) * 2 - 15px )

div

{

    width: calc( 100% - 2.5em );

    background-position: calc( 50% + 50px );

    margin: calc( 1.25rem - 5px );

}