浏览器端存储安全（LocalStorage/IndexedDB/Service Worker）最佳实践

浏览器端存储安全（LocalStorage/IndexedDB/Service Worker）最佳实践概述浏览器端存储需坚持数据最小化与可过期策略，对敏感数据采用加密与作用域限制，并治理离线缓存。加密存储封装async function deriveKey(secret: string): Promise<CryptoKey> {

const enc = new TextEncoder().encode(secret)

return await crypto.subtle.importKey('raw', enc, 'AES-GCM', false, ['encrypt', 'decrypt'])

}

async function encrypt(value: string, key: CryptoKey): Promise<string> {

const iv = crypto.getRandomValues(new Uint8Array(12))

const data = new TextEncoder().encode(value)

const ct = await crypto.subtle.encrypt({ name: 'AES-GCM', iv }, key, data)

return `${btoa(String.fromCharCode(...iv))}.${btoa(String.fromCharCode(...new Uint8Array(ct)))}`

}

async function decrypt(payload: string, key: CryptoKey): Promise<string> {

const [ivb64, ctb64] = payload.split('.')

const iv = Uint8Array.from(atob(ivb64), c => c.charCodeAt(0))

const ct = Uint8Array.from(atob(ctb64), c => c.charCodeAt(0))

const pt = await crypto.subtle.decrypt({ name: 'AES-GCM', iv }, key, ct)

return new TextDecoder().decode(pt)

}

TTL与最小化type Entry = { value: string; expiresAt: number }

function setWithTTL(k: string, v: string, ttlMs: number) {

const e: Entry = { value: v, expiresAt: Date.now() + ttlMs }

localStorage.setItem(k, JSON.stringify(e))

}

function getWithTTL(k: string): string | null {

const raw = localStorage.getItem(k)

if (!raw) return null

const e = JSON.parse(raw) as Entry

if (Date.now() > e.expiresAt) { localStorage.removeItem(k); return null }

return e.value

}

Service Worker缓存治理self.addEventListener('install', (event) => {

event.waitUntil(caches.open('app-v1').then((cache) => cache.addAll(['/index.html', '/styles.css'])))

})

self.addEventListener('fetch', (event) => {

const url = new URL(event.request.url)

if (!['/index.html', '/styles.css', '/script.js'].includes(url.pathname)) return

event.respondWith(caches.match(event.request).then((res) => res || fetch(event.request)))

})

运维要点避免在LocalStorage存放长期令牌，优先使用安全Cookie对IndexedDB敏感集合进行加密与分区管理对Service Worker缓存启用版本与白名单路径控制通过加密封装、TTL与缓存治理，可提升浏览器端数据安全与可控性。