在現(xiàn)代Web開(kāi)發(fā)中，瀏覽器端本地存儲(chǔ)技術(shù)扮演著至關(guān)重要的角色，它使得Web應(yīng)用能夠在用戶(hù)瀏覽器中存儲(chǔ)數(shù)據(jù)，實(shí)現(xiàn)離線功能、提升性能并改善用戶(hù)體驗(yàn)。本文將詳細(xì)介紹瀏覽器端主要的本地存儲(chǔ)技術(shù)。一、Cookie
基本概念
Cookie是最早的瀏覽器存儲(chǔ)機(jī)制，最初設(shè)計(jì)用于在客戶(hù)端存儲(chǔ)會(huì)話信息。
特點(diǎn)
存儲(chǔ)大小：約4KB
生命周期：可設(shè)置過(guò)期時(shí)間，未設(shè)置則為會(huì)話級(jí)
自動(dòng)發(fā)送：每次HTTP請(qǐng)求都會(huì)自動(dòng)攜帶同域Cookie
作用域：遵循同源策略，可設(shè)置domain和path
使用示例
document.cookie = "user=John;Max-Age=10";const cookies = document.cookie.split(';');
上面cookie 10秒鐘后過(guò)期，瀏覽器自動(dòng)刪除
優(yōu)缺點(diǎn)
優(yōu)點(diǎn)：兼容性極好，所有瀏覽器都支持
缺點(diǎn)：容量小，安全性問(wèn)題（CSRF攻擊），性能影響（每次請(qǐng)求都攜帶）
二、Web Storage
Web Storage分為兩種：localStorage和sessionStorage。
localStorage特點(diǎn)
使用示例
localStorage.setItem('user', 'John');const data = localStorage.getItem('user');localStorage.removeItem('user');
使用示例
sessionStorage.setItem('user', 'john');
Web Storage優(yōu)缺點(diǎn)
優(yōu)點(diǎn)：操作簡(jiǎn)單，容量較大
缺點(diǎn)：只能存儲(chǔ)字符串，同步操作可能阻塞主線程
三、IndexedDB
IndexedDB是一種底層API，用于客戶(hù)端存儲(chǔ)大量結(jié)構(gòu)化數(shù)據(jù)。
主要特性
使用示例
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高級(jí)程序設(shè)計(jì)', author: 'Nicholas' });
tx.oncomplete = () => db.close();};
優(yōu)點(diǎn)：容量大，支持復(fù)雜查詢(xún)，異步操作
缺點(diǎn)：API復(fù)雜，學(xué)習(xí)曲線陡峭
Cache API是Service Worker的一部分，用于緩存網(wǎng)絡(luò)請(qǐng)求和響應(yīng)。
主要用途
實(shí)現(xiàn)離線應(yīng)用
加速資源加載
自定義緩存策略
使用示例
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) { }});
優(yōu)缺點(diǎn)
優(yōu)點(diǎn)：精細(xì)控制緩存，支持離線功能
缺點(diǎn)：需要Service Worker支持，管理復(fù)雜
閱讀原文：原文鏈接
該文章在 2025/7/7 11:42:02 編輯過(guò)
400 186 1886
