HTML5离线存储HTML5离线存储 HTML5 引入了离线存储功能，允许 Web 应用在没有网络连接的情况下继续运行。

HTML5离线存储

HTML5 引入了离线存储功能，允许 Web 应用在没有网络连接的情况下继续运行。这是通过 Application Cache（已废弃）和 Service Worker 结合 Cache API 实现的。以下是 HTML5 离线存储的详细介绍：

1. Application Cache（已废弃）

Application Cache 是 HTML5 早期提供的离线存储方案，但目前已被废弃，不建议使用。它通过缓存资源文件（如 HTML、CSS、JS、图片等）来实现离线访问。

工作原理

使用一个 manifest 文件（如 app.manifest）列出需要缓存的资源。
浏览器根据 manifest 文件下载并缓存资源。
当用户离线时，浏览器从缓存中加载资源。

示例

HTML 文件：

<!DOCTYPE html>
<html manifest="app.manifest">
<head>
  <title>离线应用</title>
</head>
<body>
  <h1>Hello, 离线世界！</h1>
</body>
</html>

manifest 文件（app.manifest）：

CACHE MANIFEST
# 版本 1.0

CACHE:
/styles.css
/script.js
/image.png

NETWORK:
*

FALLBACK:
/offline.html

缺点

缓存更新机制不灵活，容易导致缓存不一致。
已被现代浏览器废弃，推荐使用 Service Worker。

2. Service Worker 和 Cache API

Service Worker 是 HTML5 离线存储的现代解决方案，它是一个运行在浏览器后台的脚本，可以拦截网络请求并缓存资源，从而实现离线访问。

核心功能

拦截网络请求：Service Worker 可以拦截页面的所有网络请求。
缓存资源：使用 Cache API 将资源缓存到本地。
离线访问：当用户离线时，从缓存中返回资源。

实现步骤

注册 Service Worker：

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(function(registration) {
      console.log('Service Worker 注册成功');
    })
    .catch(function(error) {
      console.log('Service Worker 注册失败：', error);
    });
}

编写 Service Worker 脚本（sw.js）：

const CACHE_NAME = 'my-cache-v1';
const urlsToCache = [
  '/',
  '/styles.css',
  '/script.js',
  '/image.png'
];

// 安装 Service Worker
self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('缓存资源');
        return cache.addAll(urlsToCache);
      })
  );
});

// 拦截请求并返回缓存
self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        if (response) {
          return response; // 返回缓存
        }
        return fetch(event.request); // 请求网络
      })
  );
});

更新缓存：

修改 CACHE_NAME 的版本号（如 my-cache-v2），触发 Service Worker 更新。

在 activate 事件中清理旧缓存：

self.addEventListener('activate', function(event) {
  const cacheWhitelist = ['my-cache-v2'];
  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
          if (!cacheWhitelist.includes(cacheName)) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

3. 使用 IndexedDB 存储结构化数据

IndexedDB 是一个浏览器内置的 NoSQL 数据库，适合存储大量结构化数据。

示例

const request = indexedDB.open('my-database', 1);

request.onupgradeneeded = function(event) {
  const db = event.target.result;
  const store = db.createObjectStore('users', { keyPath: 'id' });
};

request.onsuccess = function(event) {
  const db = event.target.result;
  const transaction = db.transaction('users', 'readwrite');
  const store = transaction.objectStore('users');

  // 添加数据
  store.add({ id: 1, name: 'Alice', age: 25 });

  // 查询数据
  const getRequest = store.get(1);
  getRequest.onsuccess = function() {
    console.log(getRequest.result); // { id: 1, name: 'Alice', age: 25 }
  };
};

4. 离线存储的应用场景

离线 Web 应用：如文档编辑器、任务管理器等。
提升性能：通过缓存静态资源，减少网络请求。
增强用户体验：在网络不稳定或无网络时仍可访问应用。

总结

Application Cache 已废弃，不建议使用。
Service Worker 和 Cache API 是现代离线存储的核心技术。
IndexedDB 适合存储大量结构化数据。
离线存储可以显著提升 Web 应用的性能和用户体验。

通过合理使用这些技术，开发者可以构建功能强大的离线 Web 应用。

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github