Question

我尝试执行w3schools中已有的以下编码集

index.html具有以下编码

<!DOCTYPE html>
     <html manifest="demo_html.appcache">
          <body>
             <script src="demo_time.js"></script>
                  <p id="timePara"><button onclick="getDateTime()">Get Date and Time</button></p>
                  <p><img src="logo.jpeg" width="336" height="69"></p>
                  <p>Try opening <a href="index.html" target="_blank">this page</a>, then go offline, and reload the page. The script and the image should still work.</p>
            </body>
      </html>

demo_time.js包含以下

 function getDateTime()
 {
       var d=new Date();
       document.getElementById('timePara').innerHTML=d;
 }

demo_html.appcache包含以下

 CACHE MANIFEST

 CACHE:
 /index.html
 /demo_time.js
 /logo.jpeg

“。htaccess”文件包含以下内容

 AddType text/cache-manifest .appcache

请在此代码中指出错误。当我在浏览器中执行代码时，firefox提示我这个网站要求在您的计算机上存储数据以供离线使用。允许，从不为此网站或现在。我选择允许，但提示并没有消失。

当我在w3schools.com上尝试相同时，单击“允许”后，提示消失了。请在上面的代码中指出错误

Answer 1

离线缓存仅适用于远程文件。在本地运行页面时，它实际上不会使文件脱机。

如果您通过服务器访问您的页面，您应该看到脱机缓存正常工作。

Answer 2

我将 demo_html.appcache 更改为更简单的

CACHE MANIFEST
index.html
demo_time.js
logo.jpeg

这对我来说都适用于firefox和chrome

Chromes“Resources”选项卡对于调试appcache非常有用：

screenshot of chromes resources-tab

应用缓存

2 个答案: