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

最新推荐文章于 2024-05-16 09:20:46 发布

Soloman

最新推荐文章于 2024-05-16 09:20:46 发布

阅读量1.7k

点赞数

分类专栏： Android移动开发 HTML5/CSS/JavaScript 文章标签： html 存储 javascript function input stylesheet

Android移动开发同时被 2 个专栏收录

77 篇文章 0 订阅

订阅专栏

HTML5/CSS/JavaScript

36 篇文章 0 订阅

订阅专栏

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

离线应用需要有一个缓存的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">
<!-- 测试的manifest文件 -->
<html xmlns="http://www.w3.org/1999/xhtml" manifest="sessionStorage.manifest">

<!-- 
    sessionStorage.html by Bill Weinman 
    <http://bw.org/contact/>
    created 2011-04-16

    Copyright (c) 2011 The BearHeart Group, LLC
    This file may be used for personal educational purposes as needed. 
    Use for other purposes is granted provided that this notice is
    retained and any changes made are clearly indicated as such. 
-->

<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">
    <!-- results show here -->
    </div>
    
</div>
</body>
</html>

Soloman

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML 5中的存储及离线应用（五）

最后咱们再来看看离线应用：离线应用需要有一个缓存的Manifest文件：文件类型(MIME-type)是：text/cache-manifest，这份工作应该在web server上进行；文件以“CACHE MANIFEST”开头；文件中有如下节：CACHE，表示缓存的文件，这个是默认节，如果未指明节的情况下默认是CACHE；NETWORK，表示不能被缓存的文件；FALLB
复制链接

扫一扫