离线存储 | Last Stand

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 文件中列出需要缓存的资源： ...