如何在HTML5使用应用程序缓存-之路教程

←HTML5表单元素

HTML5输入类型→

更新缓存

用户清除浏览器的缓存。

列表文件已修改。

应用程序缓存是以编程方式更新。

如何在HTML5使用应用程序缓存

HTML5应用程序缓存对于离线访问基于web的应用程序越来越重要。是的，所有的浏览器都有缓存机制，但是它们不可靠，而且并不总是像你所期望的那样工作。这通常被称为HTML5应用程序缓存，大多数主流浏览器都支持它。

特点：

用于确定应缓存哪些路径的管理员接口。
内置支持离线延迟加载，任何访问过的页面都会自动缓存以供离线访问。
自动缓存列表验证。

HTML5中的列表文件的结构

此文件驻留在服务器上，并指示应在浏览器的AppCache中存储客户端的文件。

一个简单的列表看起来像这样。

CACHE MANIFEST
index.html
stylesheet.css
images/Image.png
scripts/main.js

Manifest文件

缓存：这是条目的默认部分。第一次下载后，将在此标题下列出的文件将明确缓存。
回退：当脱机用户尝试访问未加工的文件时该怎么办。
网络：本节下列出的文件是需要连接到服务器的白列表资源。

HTML5缓存列表示例

<!DOCTYPE HTML>
<html manifest="demo.manifest">
<body>
the document is here..............
</body>
</html>

另一个例子

<!DOCTYPE html>
<html manifest="demo.manifest">
<script type="text/javascript">
var lStorage;
function init()
{
           if (window.localStorage)
           {
                        lStorage = window.localStorage;
                        if (typeof lStorage.score == 'undefined')
                        lStorage.score = 0;
                        document.getElementById('score').innerHTML = lStorage.score;
            }
}
function save()
{
            if (lStorage)
             {
                       lStorage.score = getGameScore();
              }
}
</script>
<body onload="init();">
<p>
last Game score was: <span id="score">last score insert in init()
</p>
</body>
</html>

日期：2020-04-11 23:04:10 来源：oir作者：oir