H5 技术

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 更新时要修改文件：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

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 );

}

巴特西

H5 技术

最新文章

热门文章