HTML5学习笔记04

一、HTML5 WEB存储

1、在客户端存储数据

HTML5提供了两种存储数据的新方法，主要是localStorage和sessionStorage方法。

2、localStorage方法

localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

<script type="text/javascript">
    localStorage.lastname="Smith";
    document.write(localStorage.lastname);
</script>

访问页面次数计数：

<script type="text/javascript">
    if (localStorage.pagecount)
      {
          localStorage.pagecount=Number(localStorage.pagecount) +1;
      }
    else
      {
          localStorage.pagecount=1;
      }
    document.write("Visits "+ localStorage.pagecount + " time(s).");
</script>

3、sessionStorage方法

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

如：

<script type="text/javascript">
    sessionStorage.lastname="Smith";
    document.write(sessionStorage.lastname);
</script>
<script type="text/javascript">
    if (sessionStorage.pagecount)
      {
          sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
      }
    else
      {
          sessionStorage.pagecount=1;
      }
    document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");
    </script>

二、HTML5应用缓存

1、优势：

  • 离线浏览 - 用户可在应用离线时使用它们
  • 速度 - 已缓存资源加载得更快
  • 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

2、实例

<!DOCTYPE HTML>
<html manifest="demo.appcache">
    <body>
        The content of the document......
    </body>
</html>

如需启用应用程序缓存，请在文档的 <html> 标签中包含 manifest 属性。每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存。manifest 文件的建议的文件扩展名是：".appcache"。

3、Manifest文件

manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。

 

manifest 文件可分为三个部分：

  • CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
  • NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
  • FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

第一行，CACHE MANIFEST，是必需的：

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

NETWORK 小节规定文件 "login.asp" 永远不会被缓存，且离线时是不可用的：

NETWORK:
login.asp

FALLBACK 小节规定如果无法建立因特网连接，则用 "offline.html" 替代 /html5/ 目录中的所有文件：

FALLBACK:
/html5/ /404.html

4、更新缓存

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html5/ /404.html

 

posted @ 2014-05-14 20:19  weddy.zheng  阅读(95)  评论(0)    收藏  举报