HTML5离线应用的目的是为了保证用户能在没有网络连接的情况下,也能够访问网站的内容。实现HTML5离线应用需要使用离线缓存机制,离线缓存机制能够将网站的完整内容缓存到用户本地,并且在没有网络连接时展示缓存的内容。
HTML5的客户端存储主要有两种方式:localStorage 和 sessionStorage。localStorage 是一种持久化的本地存储,数据保存的时间不会受到时间的限制,直到用户手动清除。而sessionStorage 则是会话级别的本地存储,数据会在用户关闭浏览器标签页或网站会话结束时清除。
现在,我们来详细介绍一下如何实现HTML5离线应用和客户端存储。
HTML5离线应用实现
首先,我们在网站根目录下新建一个名为“cache.manifest”的缓存清单文件。文件内容如下:
CACHE MANIFEST
# v1.0.0
CACHE:
/index.html
/css/style.css
/js/main.js
/images/logo.png
NETWORK:
*
FALLBACK:
/ /offline.html
以上代码中,CACHE MANIFEST 意味着这个文件是缓存清单文件。CACHE 列表中包含需要缓存的文件列表,NETWORK 列表中是不需要缓存,需要联网才能访问的文件列表。FALLBACK 列表设置了当无法连接网络时,使用哪个页面来替代无法达到的页面。
接下来,在网站的 html 根标签中添加 manifest 属性。如下代码:
<!DOCTYPE html>
<html lang="en" manifest="cache.manifest">
在这里我们使用了 cache.manifest 作为离线应用的标识,当浏览器第一次访问该页面时,浏览器会下载 cache.manifest 文件中列出的所有文件,并存储在本地。以后在没有网络连接的情况下再次打开该页面,浏览器会直接从本地缓存中获取所需的文件,而不会再次向服务器请求。
localStorage 和 sessionStorage 的实现
使用localStorage 和 sessionStorage 主要可以用来存储用户数据和用户设置。我们来看下如何分别使用这两个客户端存储。
localStorage 的使用
localStorage 的操作非常简单,我们可以使用setItem()、getItem()和removeItem()方法来实现给localStorage 设置、获取、删除数据等操作,如下所示:
const key = 'username';
const value = 'Tom';
localStorage.setItem(key, value); // 设置
const storedValue = localStorage.getItem(key); // 获取
localStorage.removeItem(key); // 删除
使用 localStorage,存储的数据对于所有同源的页面都是可以访问的,如果需要在不同的域名下共享数据,建议使用 sessionStorage 或者 cookie。
sessionStorage 的使用
使用 sessionStorage 的方式与 localStorage 类似,也是使用 setItem()、getItem()和removeItem()这些方法来进行操作,如下所示:
const key = 'isLogin';
const value = 'true';
sessionStorage.setItem(key, value); // 设置
const storedValue = sessionStorage.getItem(key); // 获取
sessionStorage.removeItem(key); // 删除
不同之处在于 sessionStorage 中的数据在浏览器会话结束时会被自动清除,也就是说,如果用户关闭了浏览器,那么数据也就被永久删除了。
示例说明
以下两个示例,一个演示了如何使用 HTML5 离线缓存实现单页面应用,一个演示了如何使用localStorage 存储用户的偏好设置。
- 单页面应用离线缓存示例:
在页面的根标签中添加manifest属性即可开启离线缓存。如下代码:
<!DOCTYPE html>
<html lang="en" manifest="cache.manifest">
<head>
<meta charset="UTF-8">
<title>SPA</title>
</head>
<body>
...
</body>
</html>
缓存清单文件 cache.manifest 中的内容如下:
CACHE MANIFEST
# v1.0.0
CACHE:
/index.html
/css/style.css
/js/main.js
/images/logo.png
NETWORK:
*
FALLBACK:
/ /offline.html
以上代码中,CACHE 列表中列出了所需缓存的文件,NETWORK 列表是不需要缓存,需要联网才能访问的文件列表。FALLBACK 则是设置了当无法连接网络时,使用哪个页面来替代无法达到的页面。
- 使用 localStorage 存储用户偏好设置示例:
在网站的设置页面上,我们可以利用 localStorage 存储用户的偏好设置。如下代码:
<form>
<input type="checkbox" id="autoPlay">
<label for="autoPlay">自动播放</label>
</form>
<script>
const key = 'setting_autoPlay';
const $autoPlay = document.querySelector('#autoPlay');
function setSetting() {
localStorage.setItem(key, $autoPlay.checked);
}
function getSetting() {
const value = localStorage.getItem(key);
if (value === 'false') {
$autoPlay.checked = false;
} else {
$autoPlay.checked = true;
}
}
getSetting();
$autoPlay.addEventListener('change', setSetting);
</script>
以上代码中,我们使用 localStorage 记录了 $autoPlay 所代表的 checkbox 是否被选中的状态。在页面加载时,我们调用 getSetting() 方法来获取 $autoPlay 当前的状态,最终根据获取到的状态设置 checkbox 的 isChecked 属性。在用户改变 checkbox 的状态时,我们调用 setSetting() 方法来记录当前 checkbox 的状态。