在現代Web開發中，瀏覽器端本地存儲技術扮演著至關重要的角色，它使得Web應用能夠在用戶瀏覽器中存儲數據，實現離線功能、提升性能并改善用戶體驗。本文將詳細介紹瀏覽器端主要的本地存儲技術。一、Cookie
基本概念
Cookie是最早的瀏覽器存儲機制，最初設計用于在客戶端存儲會話信息。
特點
使用示例
document.cookie = "user=John;Max-Age=10";const cookies = document.cookie.split(';');
上面cookie 10秒鐘后過期，瀏覽器自動刪除
優缺點
優點：兼容性極好，所有瀏覽器都支持
缺點：容量小，安全性問題（CSRF攻擊），性能影響（每次請求都攜帶）
二、Web Storage
Web Storage分為兩種：localStorage和sessionStorage。
localStorage特點
持久性：數據永久存儲，除非手動刪除
作用域：同一域名下的所有頁面共享
存儲大小：通常5MB左右
使用示例
localStorage.setItem('user', 'John');const data = localStorage.getItem('user');localStorage.removeItem('user');
會話級：數據僅在當前會話有效，關閉標簽頁后清除
作用域：僅限當前標簽頁
存儲大小：通常5MB左右
使用示例
sessionStorage.setItem('user', 'john');
Web Storage優缺點
優點：操作簡單，容量較大
缺點：只能存儲字符串，同步操作可能阻塞主線程
三、IndexedDB
IndexedDB是一種底層API，用于客戶端存儲大量結構化數據。
主要特性
異步操作：不會阻塞UI
存儲量大：通常不少于250MB
支持事務：保證數據一致性
索引查詢：高性能數據檢索
使用示例
const request = indexedDB.open('myDatabase', 1);request.onupgradeneeded = (event) => { const db = event.target.result; const store = db.createObjectStore('books', { keyPath: 'id' }); store.createIndex('by_title', 'title', { unique: false });};request.onsuccess = (event) => { const db = event.target.result; const tx = db.transaction('books', 'readwrite'); const store = tx.objectStore('books');
store.add({ id: 1, title: 'JavaScript高級程序設計', author: 'Nicholas' });
tx.oncomplete = () => db.close();};
優點：容量大，支持復雜查詢，異步操作
缺點：API復雜，學習曲線陡峭
Cache API是Service Worker的一部分，用于緩存網絡請求和響應。
主要用途
使用示例
caches.open('my-cache-v1').then(cache => { cache.add('/styles/main.css');
cache.addAll(['/styles/main.css', '/scripts/app.js']);});
caches.match('/styles/main.css').then(response => { if (response) { }});
優缺點
優點：精細控制緩存，支持離線功能
缺點：需要Service Worker支持，管理復雜
閱讀原文：原文鏈接
該文章在 2025/7/7 11:42:02 編輯過
400 186 1886
