您的位置：首页 > Web前端 > HTML

HTML 5中的存储及离线应用（五）

2012-08-22 10:31 281 查看

最后咱们再来看看离线应用：

离线应用需要有一个缓存的Manifest文件：

文件类型(MIME-type)是：text/cache-manifest，这份工作应该在web server上进行；
文件以“CACHE MANIFEST”开头；
文件中有如下节：CACHE，表示缓存的文件，这个是默认节，如果未指明节的情况下默认是CACHE；NETWORK，表示不能被缓存的文件；FALLBACK表示离线时用来替换在线时的文件；

CACHE MANIFEST

CACHE:
exp-calif-logo-offline.gif
sessionStorage.html
../CSS/main.css
../Javascript/bwH5LS.js

FALLBACK:
exp-calif-logo.gif exp-calif-logo-offline.gif
上面就是一个测试的manifest文件。

测试的html文件如下：

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" manifest="sessionStorage.manifest">



<head>
<title>
sessionStorage example
</title>
<link rel="stylesheet" type="text/css" href="../CSS/main.css">
<script language="javascript" src="../Javascript/bwH5LS.js"></script>
<script language="javascript">
var t = new bwTable();
var db = getSessionStorage() || dispError('Session Storage not supported.');

function getSessionStorage() {
try {
if( !! window.sessionStorage ) return window.sessionStorage;
} catch(e) {
return undefined;
}
}

function dispResults() {
if(errorMessage) {
element('results').innerHTML = errorMessage;
return;
}

var t = new bwTable();
t.addRow( ['traveler', db.getItem('traveler')] );
t.addRow( ['destination', db.getItem('destination')] );
t.addRow( ['transportation', db.getItem('transportation')] );
element('results').innerHTML = t.getTableHTML();
element('travelForm').elements['traveler'].focus();
element('travelForm').elements['traveler'].select();
}

function dbGo() {
if(errorMessage) return;
var f = element('travelForm');
db.setItem('traveler', f.elements['traveler'].value);
db.setItem('destination', f.elements['destination'].value);
db.setItem('transportation', f.elements['transportation'].value);
dispResults();
}

function dbClear() {
if(errorMessage) return;
db.clear();
dispResults();
}

function initDisp() {
dispResults();
}

window.onload = function() {
initDisp();
}
</script>
</head>

<body>

<div id="content">

<img src="exp-calif-logo.gif" style="float: left; margin-right: 10px"/>
<h1>
sessionStorage example
</h1>

<div id="form">
<form id="travelForm">
<table class="form">
<tr><td class="label"> Traveler </td><td> <input type="text" name="traveler" /> </td></tr>
<tr><td class="label"> Destination </td><td> <input type="text" name="destination" /> </td></tr>
<tr><td class="label"> Transportation </td><td> <input type="text" name="transportation" /> </td></tr>
<tr><td colspan="2" class="button">
<input id="formSubmit" type="button" value="Clear" onClick="javascript:dbClear()" />
<input id="formSubmit" type="button" value="Go" onClick="javascript:dbGo()" />
</td></tr>
</table>
<input id="inputAction" type="hidden" name="action" value="add" />
<input id="inputKey" type="hidden" name="key" value="0" />
</form>
</div>

<div id="results">

</div>

</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html 存储 javascript function input stylesheet

相关文章推荐

新的分享

章节导航