在現(xiàn)代Web開(kāi)發(fā)中,瀏覽器端本地存儲(chǔ)技術(shù)扮演著至關(guān)重要的角色,它使得Web應(yīng)用能夠在用戶瀏覽器中存儲(chǔ)數(shù)據(jù),實(shí)現(xiàn)離線功能、提升性能并改善用戶體驗(yàn)。本文將詳細(xì)介紹瀏覽器端主要的本地存儲(chǔ)技術(shù)。一、Cookie
基本概念
Cookie是最早的瀏覽器存儲(chǔ)機(jī)制,最初設(shè)計(jì)用于在客戶端存儲(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,用于客戶端存儲(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ù)雜查詢,異步操作
缺點(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ò)