离线存储

Wed, 16 Oct 2024 00:00:00 +0800

HTML5 离线存储是指通过 Web Storage API 提供的一种在客户端本地存储数据的机制，主要有两种方式：localStorage 和 sessionStorage。与传统的 Cookie 相比，Web Storage 提供了更大容量、灵活性，并且数据不会随着 HTTP 请求自动发送到服务器，这可以优化性能和安全性。此外，HTML5 还支持 离线应用缓存（Application Cache） 和 IndexedDB，用于更加复杂的数据存储需求和离线应用。

工作原理

HTML5 的离线存储主要通过以下几个机制来实现数据存储和访问：

localStorage：一种持久性存储机制，数据存储在用户的浏览器中，即使关闭浏览器或重新加载页面，数据也不会丢失，除非明确被删除。其特点是跨页面、跨会话存储数据。
sessionStorage：会话级别的存储机制，只在当前页面的会话期间有效。当会话结束或浏览器窗口关闭时，数据会自动删除。其特点是只能在当前窗口或标签页中存储数据，不能跨窗口或标签页共享。
Application Cache（已被 Service Worker 替代）：允许开发者将网站的某些资源缓存到本地，使得用户即使在离线的情况下也能访问特定页面。虽然该机制已被弃用，但它曾经是实现离线访问的核心。
IndexedDB：一种更为复杂的浏览器内置数据库，支持存储结构化数据，如对象和文件。它适用于更大规模的数据存储需求，并且允许通过索引进行高效的查询和数据操作。

使用方式

1. localStorage

特点：持久性存储，浏览器关闭后数据依然存在，除非手动清除。
使用方式：

// 存储数据
localStorage.setItem('key', 'value');

// 获取数据
let value = localStorage.getItem('key');

// 删除数据
localStorage.removeItem('key');

// 清空所有 localStorage
localStorage.clear();

2. sessionStorage

特点：仅在当前会话期间有效，浏览器关闭或页面重新加载后数据会被清除。
使用方式：

// 存储数据
sessionStorage.setItem('sessionKey', 'sessionValue');

// 获取数据
let sessionValue = sessionStorage.getItem('sessionKey');

// 删除数据
sessionStorage.removeItem('sessionKey');

// 清空所有 sessionStorage
sessionStorage.clear();

3. IndexedDB

特点：适合存储大量的结构化数据，支持异步 API 和事务。
使用方式： IndexedDB 的使用较为复杂，通常涉及打开数据库、创建事务、存储和检索数据等操作。一个简单的示例如下：

let request = indexedDB.open('myDatabase', 1);

request.onupgradeneeded = function(event) {
 let db = event.target.result;
 let objectStore = db.createObjectStore('myObjectStore', { keyPath: 'id' });
};

request.onsuccess = function(event) {
 let db = event.target.result;
 let transaction = db.transaction(['myObjectStore'], 'readwrite');
 let objectStore = transaction.objectStore('myObjectStore');
 objectStore.add({ id: 1, name: 'John Doe' });
};

4. Application Cache（弃用）

特点：通过 manifest 文件指定需要缓存的资源，允许在离线时访问应用。
使用方式：在 HTML 文档中指定 manifest 文件：

<html manifest="app.manifest">

然后在 app.manifest 文件中列出需要缓存的资源：