HTML5：离线web应用和web存储笔记

离线web应用

离线Web应用工作机制

客户端浏览器中输入要访问页面的URL地址，向该地址指向的Web服务器发出请求。
Web服务器根据浏览器送来的请求，将请求的文档和所需资源返回给浏览器。
浏览器解析返回的文档，处理或显示从Web服务器返回的资源文件。如果支持离线Web应用，重点考察manifest缓存文件，该文件由html标记的manifest属性指定。

离线Web应用优点

离线浏览。用户可以在离线时继续使用Web应用程序。
提高用户Web应用体验。将资源缓存到本地，资源加载速度更快，缩短Web应用的响应时间。
减轻Web服务器的负载。浏览器只需要从Web服务器下载更新过或更改过的资源。

使用应用缓存实现离线Web应用中，需要在HTML文档的html标记中包含manifest属性，并在其中指明manifest文件，该文件的扩展名应为建议为”.appcache”或”
.manifest”
manifest文件是一个文本文件，其中包含离线Web应用程序需要加载的文件列表。

离线web应用的实现

HTML5离线Web应用的实现
一是构造合理的manifest文件，从而实现资源缓存；
二是检测在线状态并实现缓存更新。

manifest文件

在线和离线Web应用的效果

CACHE MANIFEST 	//manifest文件的开始

#version 3.1      //版本说明,缓存文件更新时间可以修改版本号
CACHE: 

images/ty1.jpg
images/ty3.jpg
mycss.css
NETWORK: 
*
FALLBACK 
online.html offline.html

manifest文件解析

manifest缓存文件是离线Web应用的关键，文件清单内容的具体说明如下。

manifest文件第一行必须是CACHE MANIFEST，文件扩展名建议使用appcache，也可以使用manifest。
CACHE：指定需要缓存的文件，清单中列出的文件在首次访问Web服务器进下载并缓存。
NETWORK：指定的文件需要与服务器连接才能获取，不会被缓存。
*是文件通配符，代表除了在CACHE中指明的文外件，所有其他文件都不缓存，需要从Web服务器获得。
FALLBACK：在此选项下列出的文件当页面无法访问时，使用备用的资源文件。
文件编码必须是utf-8。

实现应用缓存，需要在标记中定义manifest属性，从而在网页中引用manifest文件，例如：

<html manifest="test.appcache">

例子

<!DOCTYPE html>
<html manifest="test.appcache">
 <head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="css/mycss.css" />
 </head>
 <body>
  <h1>离线应用</h1>
  <img src="images/pp.png" alt="" />
  <img src="images/mine.png" alt="" />
  <img src="images/flag.png" alt="" />
  <div id="i1">CSS样式</div>
 </body>
</html>

@charset "utf-8";
/* CSS Document */
#i1 {
    font: 36px "仿宋";
    color: blue;
}

test.appcache

CACHE MANIFEST
#上一行是必须有的，manifest文件的开始。
#version 5
#上一行是版本说明，缓存文件更新时可以修改版本号

CACHE: 
images/mine.png
images/flag.png
mycss.css
# 用CACHE说明的部分写需要缓存的资源文件列表
# 可以是相对路径也可以是绝对路径

NETWORK: 
*
# 上一部分可选，是要绕过缓存直接读取的文件

FALLBACK 
online.html offline.html 
# 上一部分可选，写当访问缓存失败后，备用访问的资源
# 每行两个文件，第一个是访问源，第二个是替换文件

在这里插入图片描述
更新缓存

用户更新缓存
可以手动清空缓存，然后再在线访问Web服务器，这时页面是会更新的。浏览器会在第一次访问Web应用程序时将manifest文件中指定的文件下载并保存在本地缓存中。
调用Javascript接口更新缓存

HTML5的Application Cache API，除了可以实现离线资源缓存，也可以用其实现本地缓存更新。

<!DOCTYPE html>
<html manifest="test.appcache">
 <head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="css/mycss.css" />
  <script>
   function init(){
    setInterval(function(){
     applicationCache.update();
    },5000);
    applicationCache.addEventListener("updateready",function(){
     applicationCache.swapCache();
     localtion.reload();   
    },true);
   }
  </script>
 </head>
 <body>
  <h1>离线应用</h1>
  <img src="images/Neg.gif" alt="" />
  <img src="images/ty1.jpg" alt="" />
  <img src="images/ty3.jpg" alt="" />
  <div id="i1">CSS样式</div>
 </body>
</html>

检测在线状态

除了将服务器的资源缓存在本地外，离线Web应用还应该能够在离线时将要提交给服务器的数据保存在本地，等在线时再将其同步到服务器。

<button id="check" onclick="check()">检查浏览器在线状态</button>
<script>
 function check(){
  if(navigator.onLine){
   alert("浏览器在线");
  }else{
   alert("浏览器不在线");
  }
 }
</script>

在这里插入图片描述

web Storage的概述

Web Storage的概念

在Web应用中，有时会希望由Web页面来记录或处理一些信息，例如用户登录状态、计数器或者用户需要和页面频繁交互的数据等。这时，可以不使用后台数据库，而是使用Web Storage技术将数据存储在客户端浏览器中。

Web Storage提供两种方式将数据保存在客户端：一种是localStorage，另一种是sessionStorage。

localStorage被称做本地存储，将数据保存在客户端本地；
sessionStorage被称为会话存储，将数据保存在session中，浏览器关闭后session对象消失。

localStorag和sessionStorage的区别

Web Storage API、Web Storage的概念

在使用了localStorage或sessionStorage对象的文档中，用户可以通过window对象来获取它们。除了数据的保存周期和有效范围外，不管是sessionStorage，还是localStorage，可使用的API都相同，其功能包括保存数据、读取数据、删除数据、得到索引的key值等。

保存数据的setItem()方法

localStorage 和sessionStorage都使用setItem()方法用来保存数据，语法格式如下：

localStorage.setItem("key","value")

读取数据的getItem()方法

localStorage和sessionStoragey使用getItem()方法用来读取数据，语法格式如下：

var value =localStorage.getItem("key");

删除数据

删除数据分为删除单个数据和删除所有数据两种。

删除单个数据时，需要指明删除的key值，形式如下

localStorage.removeItem("key");

删除所有数据使用clear()方法，它能删除存储列表中的所有数据。语法格式如下：

localStorage.clear();

length属性

length属性表示目前Storage对象中存储的键值对的数量，length属性主要用来遍历localStorage或sessionStoragey中的所有对象。

返回索引的key值

遍历Storage对象时，需要使用key(index)方法允许获取一个指定位置的键值。语法格式如下。

localStorage.key(index);

web Storage应用

使用localStorage和sessionStorage的网页计数器

<h3>Session计数器</h3>
<div id="content"></div>
<p></p>
<hr />
<script>
 if(!sessionStorage["counter"]){
  sessionStorage["counter"]=0;
 }else{
  sessionStorage["counter"]++;
 }
 document.querySelector("#content").innerHTML="刷新次数"+sessionStorage.getItem("counter");
</script>

在这里插入图片描述
使用localStorage保存、读取和清除数据

<script>
 function saveS(id){
  var key=document.getElementById("key").value;
  var value=document.getElementById("value").value;
  localStorage.setItem(key,value);
 }
 function readS(id){
   var target = document.getElementById(id);
            var result = "";
            for (var i = 0; i < localStorage.length; i++) {
                var tempId = localStorage.key(i);
                var name = localStorage.getItem(tempId);
                result += tempId + "  " + name + "<br/>";
            }
            target.innerHTML = result;
 }
 function clearS(id){
  localStorage.clear();
 }
</script>

<h3>web storage</h3>
<input type="button" value="保存数据" onclick="saveS('input')"/>
<input type="button" value="读取数据" onclick="readS('msg')"/>
<input type="button" value="清除数据" onclick="clearS('msg')"/>
<hr />
Key:<input type="text" id="key" />
value:<input type="text" id="value" />
<hr />
<div id="msg"> </div>

在这里插入图片描述
使用localStorage实现电话簿管理

<div style="border:1px solid blue;width:320px;text-align:center; padding:5px;">
    <label for="user_name">姓名：</label>
    <input type="text" id="user_name" name="user_name"/>
    <br/>
    <label for="phone">手机：</label>
    <input type="text" id="phone"/>
    <br/>
    <input type="button" onclick="save()" value="新增记录"/>
    <hr/>
    <label for="search_name">输入姓名：</label>
    <input type="text" id="search_name" name="search_name"/>
    <input type="button" onclick="find()" value="查找信息"/>
    <p id="find_result"></p>
    <hr/>
    <input type="button" onclick="loadAll()" value="显示全部"/>
</div>
<div id="list">
</div>
<script>
        //保存数据
        function save() {
            var phone = document.getElementById("phone").value;
            var user_name = document.getElementById("user_name").value;
            localStorage.setItem(user_name, phone);
        }
        //查找数据
        function find() {
            var search_name = document.getElementById("search_name").value;
            var phone = localStorage.getItem(search_name);
            var find_result = document.getElementById("find_result");
            find_result.innerHTML = search_name + "电话号码：" + phone;
        }
        //将所有存储在localStorage中的对象提取出来，并展现到界面上
        function loadAll() {
            var list = document.getElementById("list");
            if (localStorage.length > 0) {
                var result = "<table border='1'>";
                result += "<tr><td>姓名</td><td>手机号码</td></tr>";
                for (var i = 0; i < localStorage.length; i++) {
                    var name = localStorage.key(i);
                    var phone = localStorage.getItem(name);
                    result += "<tr><td>" + name + "</td><td>" + phone + "</td></tr>";
                }
                result += "</table>";
                list.innerHTML = result;
            } else {
                list.innerHTML = "数据为空";
            }
        }
    </script>

在这里插入图片描述
使用JSON对象改进电话簿的功能

<script>
        function $(id) {  //查找对象
            return document.getElementById(id);
        }
        function save() {
            var contact = new Object;
            contact.user_name = $("user_name").value;
            contact.phone = $("phone").value;
            contact.address = $("address").value;
            var str = JSON.stringify(contact);
            localStorage.setItem(contact.user_name, str);
            $("user_name").value = "";
            $("phone").value = "";
            $("address").value = "";
        }
        //查找数据
        function find() {
            var search_name = $("search_name").value;
            var record = localStorage.getItem(search_name);
            var find_result = $("find_result");
            var contact = JSON.parse(record);
            find_result.innerHTML = search_name + "电话号码：" +contact.phone;
        }
        function loadAll() {
            var list = $("list");
            if (localStorage.length > 0) {
                var result = "<table border='1'>";
                result += "<tr><td>姓名</td><td>手机</td><td>地址</td></tr>";
                for (var i = 0; i < localStorage.length; i++) {
                    var name = localStorage.key(i);
                    var str = localStorage.getItem(name);
                    var contact = JSON.parse(str);
                    result += "<tr><td>" + contact.user_name + "</td><td>" + contact.phone + "</td><td>" + contact.address + "</td></tr>";
                }
                result += "</table>";
                list.innerHTML = result;
            } else {
                list.innerHTML = "数据为空";
            }
        }
    </script>

<h2>电话簿管理</h2>
<hr/>
<div id="region">
    <label for="user_name">姓名：</label>
    <input type="text" id="user_name" autofocus/>
    <br/>
    <label for="phone">手机：</label>
    <input type="tel" id="phone"/>
    <br/>
    <label for="address">地址：</label>
    <input type="text" id="address"/>
    <br/>
    <input type="button" onclick="save()" value="新增记录"/>
    <hr/>
    <label for="search_name">输入姓名：</label>
    <input type="text" id="search_name" name="search_name"/>
    <input type="button" onclick="find()" value="查找信息"/>
    <p id="find_result"></p>
    <hr/>
    <input type="button" onclick="loadAll()" value="显示全部"/>
</div>
<div id="list"></div>

在这里插入图片描述

YanHilin

发布了137 篇原创文章 · 获赞 26 · 访问量 3万+

私信关注