HTML5 localStorage có giới hạn dung lượng lưu trữ theo origin (kết hợp: protocol + domain + port). Mỗi origin thường được cấp 5MB - 10MB.
Quy tắc Same-Origin Policy cho localStorage
example.comvàwww.example.comlà khác origin → localStorage riêng biệt.a.example.com,b.example.com(subdomain) là khác origin → localStorage riêng biệt.- Tổng dung lượng tất cả subdomain có thể vượt quá giới hạn domain chính nếu không kiểm soát.
Giới hạn khuyến nghị (W3C Spec)
"User agents should guard against sites storing data under their origin's other affiliated sites, e.g. storing up to the limit in a1.example.com, a2.example.com, a3.example.com, etc, circumventing the main example.com storage limit."
"A mostly arbitrary limit of five megabytes per origin is suggested."
Bảng giới hạn thực tế (Tham khảo)
| Trình duyệt | Giới hạn/origin |
|---|---|
| Chrome, Edge, Opera | ~5 MB - 10 MB |
| Firefox | ~10 MB |
| Safari (Desktop) | ~5 MB |
| Safari (iOS) | ~5 MB |
| IE 10+ | ~10 MB |
Chiến lược quản lý multi-subdomain
1. Chia sẻ localStorage qua domain cha (document.domain - Legacy)
// Trên a.example.com và b.example.com document.domain = 'example.com'; // Chỉ hoạt động nếu cùng domain cha // Sau đó có thể truy cập localStorage qua iframe proxy
⚠️ Deprecated: document.domain setter bị loại bỏ dần (Chrome 100+ cảnh báo, Firefox đã gỡ). Không khuyến khích.
2. Shared Worker / BroadcastChannel (Hiện đại)
// BroadcastChannel - giao tiếp giữa tab/origin cùng domain
const channel = new BroadcastChannel('storage_sync');
channel.postMessage({ type: 'SET', key: 'user', value: '...' });
channel.onmessage = (e) => { /* Cập nhật localStorage cục bộ */ };
3. Backend API (Khuyên dùng nhất)
Lưu dữ liệu quan trọng lên server (Database), localStorage chỉ làm cache/UI state. Subdomain gọi API chung.
4. Cookie domain cha (Cho auth token)
Set-Cookie: session=abc123; Domain=.example.com; Secure; HttpOnly; SameSite=Lax
Cookie với Domain=.example.com chia sẻ được cho tất cả subdomain.
Kiểm tra dung lượng đã dùng
function getLocalStorageUsage() {
var total = 0;
for (var key in localStorage) {
if (localStorage.hasOwnProperty(key)) {
total += localStorage[key].length + key.length;
}
}
return {
bytes: total,
kb: (total / 1024).toFixed(2),
mb: (total / 1024 / 1024).toFixed(2)
};
}
console.log(getLocalStorageUsage());
Xử lý khi đầy (QuotaExceededError)
try {
localStorage.setItem('key', largeData);
} catch (e) {
if (e.name === 'QuotaExceededError' || e.code === 22) {
console.warn('localStorage đầy! Cần dọn dẹp.');
// Xóa cache cũ, dữ liệu ít quan trọng
}
}