HTML5离线应用与客户端存储的实现

时间：2023-12-13

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 的状态。

上一篇：border 边框属性在浏览器中的渲染方式 下一篇：使用Angular CLI进行Build(构建)和Serve详解