第12节课：本地存储与应用缓存——提升离线体验和性能

随着Web应用的日益复杂化，用户期望获得更快的加载速度和更好的离线体验。HTML5引入了本地存储和应用缓存功能，以满足这些需求。本节课将详细介绍localStorage、sessionStorage以及应用缓存（通过manifest文件），探讨它们如何帮助提升Web应用的性能和用户体验。

本地存储：`localStorage`和`sessionStorage`

`localStorage`

localStorage提供了一种方式，允许Web应用在用户浏览器中存储数据，直到显式地清除它们。数据以字符串的形式存储，没有时间限制。

使用`localStorage`

存储数据 ：localStorage.setItem('key', 'value');
检索数据 ：localStorage.getItem('key');
删除数据 ：localStorage.removeItem('key');
清除所有数据 ：localStorage.clear();

`sessionStorage`

与localStorage类似，sessionStorage也用于存储数据，但它提供了会话级别的存储，即数据仅在页面会话期间有效，关闭浏览器标签后数据即被清除。

使用`sessionStorage`

存储数据 ：sessionStorage.setItem('key', 'value');
检索数据 ：sessionStorage.getItem('key');
删除数据 ：sessionStorage.removeItem('key');
清除所有数据 ：sessionStorage.clear();

本地存储的应用场景

用户偏好设置：存储用户的主题选择、字体大小等偏好设置。
表单数据：自动填充表单或在提交前保存数据。
应用程序状态：保存游戏进度或应用的当前状态。

应用缓存：通过Manifest定义

应用缓存概述

应用缓存（AppCache）允许Web应用在用户设备上存储资源，以便在没有网络连接时也能访问这些资源。通过一个manifest文件，开发者可以列出需要缓存的资源。

创建和使用应用缓存

创建manifest文件 ：创建一个名为manifest.appcache的文件，列出所有需要缓存的资源。
appcache 复制代码
```
CACHE MANIFEST
# 版本号
v=1.0

CACHE:
index.html
style.css
script.js

NETWORK:
resourse.php
```
在HTML中引用manifest：
html 复制代码
```
<html manifest="manifest.appcache">
```
应用缓存的生命周期：包括下载、安装、使用和更新。

应用缓存的限制和替代方案

由于一些兼容性和使用上的问题，应用缓存已逐渐被废弃。现代Web开发倾向于使用服务工作线程（Service Workers）来实现更灵活的离线体验。

实践：使用本地存储和应用缓存

示例：使用`localStorage`保存用户偏好设置

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <title>本地存储示例</title>
</head>
<body>
    <button id="saveTheme">保存主题</button>
    <script>
        document.getElementById('saveTheme').addEventListener('click', function() {
            var userTheme = 'dark'; // 假设用户选择了深色主题
            localStorage.setItem('theme', userTheme);
            alert('主题已保存！');
        });
    </script>
</body>
</html>

示例：使用应用缓存

创建manifest.appcache文件：

复制代码

CACHE MANIFEST
v=1.1

CACHE:
index.html
style.css
app.js

NETWORK:
login.php

在HTML文档中引用manifest：
html 复制代码
```
<html manifest="manifest.appcache">
```

结语

本地存储和应用缓存是提升Web应用性能和用户体验的重要工具。通过本节课的学习，你应该对localStorage、sessionStorage和应用缓存有了深入的理解。尽管应用缓存的使用有所限制，但本地存储仍然是一个强大的功能，可以用于保存用户的偏好设置和状态信息。随着Web技术的发展，Service Workers提供了更现代和灵活的解决方案，用于创建离线Web应用。