LocalStorage Viewer

Tính năng nổi bật

Tại sao cần công cụ xem LocalStorage? Ứng dụng trong Web Development

LocalStorage là Web Storage API cho phép lưu trữ dữ liệu key-value trên browser của user, persist qua các sessions (không mất khi đóng browser). Đây là cách phổ biến để lưu user preferences, authentication tokens, cached data, form drafts, shopping cart... Khi develop và debug web applications, bạn thường cần: Xem dữ liệu đang được lưu trong localStorage. Kiểm tra format và giá trị có đúng không. Thêm/sửa data để test các scenarios khác nhau. Xóa data để reset state. Clear all để test fresh user experience. Mặc dù browser DevTools có localStorage viewer, công cụ này cung cấp giao diện thân thiện hơn với các tính năng như search, inline edit, size display, và copy với một click. Đặc biệt hữu ích khi làm việc với localStorage chứa nhiều items hoặc values phức tạp (JSON objects).

Lợi ích khi sử dụng

• •Debug localStorage issues nhanh chóng với giao diện trực quan
• •Xem tất cả stored data một cách tổng quan
• •Test different scenarios bằng cách modify localStorage
• •Kiểm tra dung lượng để tránh exceed quota (5MB limit)
• •Copy values dễ dàng để paste vào code hoặc documentation
• •Clear localStorage để test fresh user experience
• •Tìm kiếm nhanh trong nhiều items
• •Không cần mở DevTools - giao diện đẹp hơn
• •Inline editing tiện lợi hơn DevTools
• •Hiển thị size giúp optimize storage usage

Hướng dẫn chi tiết cách sử dụng LocalStorage Viewer

1. 1Mở công cụ - tự động load tất cả localStorage items của trang hiện tại
2. 2Xem danh sách items với key (vàng), value, và size
3. 3Dùng ô tìm kiếm để filter theo key name
4. 4Click icon Copy để sao chép value của item
5. 5Click icon Edit (bút) để sửa value inline
6. 6Sau khi sửa, click icon Save để lưu thay đổi
7. 7Click icon Trash để xóa một item cụ thể
8. 8Để thêm item mới: nhập Key và Value vào 2 ô, click nút +
9. 9Click nút Refresh để cập nhật danh sách (nếu có thay đổi từ code)
10. 10Click nút Trash đỏ (góc trên) để xóa TẤT CẢ localStorage

LocalStorage vs SessionStorage vs Cookies - Khi nào dùng cái nào?

Web browsers cung cấp nhiều cách lưu trữ data phía client, mỗi cách có use case riêng. LocalStorage: Persist vĩnh viễn (cho đến khi bị xóa manually), dung lượng ~5MB, chỉ accessible từ client-side JavaScript, không gửi lên server với mỗi request. Dùng cho: user preferences, cached data, draft content. SessionStorage: Giống localStorage nhưng chỉ tồn tại trong session (mất khi đóng tab/browser), mỗi tab có sessionStorage riêng. Dùng cho: temporary data, form state trong multi-step forms. Cookies: Dung lượng nhỏ (~4KB), được gửi lên server với mỗi HTTP request, có thể set expiration date, có thể accessible từ server. Dùng cho: authentication tokens, session IDs, tracking. IndexedDB: Database phức tạp hơn, dung lượng lớn hơn, hỗ trợ transactions và indexes. Dùng cho: offline apps, large datasets, complex queries.

LocalStorage Security Considerations

LocalStorage có một số security concerns cần lưu ý: XSS Vulnerability: Bất kỳ JavaScript nào chạy trên page đều có thể đọc localStorage. Nếu site bị XSS attack, attacker có thể steal tất cả localStorage data. Vì vậy, KHÔNG nên lưu sensitive data như passwords, credit cards, hoặc long-lived authentication tokens trong localStorage. Thay vào đó, dùng httpOnly cookies cho auth tokens. No Encryption: Data trong localStorage được lưu dưới dạng plain text. Bất kỳ ai có access vào browser (physically hoặc qua malware) đều có thể đọc. Same-Origin Policy: LocalStorage bị giới hạn bởi same-origin policy - chỉ pages từ cùng origin (protocol + domain + port) mới có thể access. Subdomain Isolation: localStorage của example.com và sub.example.com là riêng biệt. Best Practice: Chỉ lưu non-sensitive data, validate data khi đọc ra, có fallback nếu localStorage bị disabled hoặc full.

Common LocalStorage Use Cases và Code Examples

LocalStorage được sử dụng rộng rãi trong web development. User Preferences: Lưu theme (dark/light mode), language, font size. Ví dụ: localStorage.setItem('theme', 'dark'). Form Drafts: Auto-save form input để user không mất data nếu accidentally close tab. Shopping Cart: Lưu cart items cho guest users (chưa login). Recently Viewed: Lưu danh sách products/articles user đã xem. Feature Flags: Lưu A/B test variants hoặc feature toggles. Cache API Responses: Cache data để giảm API calls và improve performance. Onboarding State: Track user đã complete onboarding steps nào. Lưu ý: Luôn handle cases khi localStorage không available (private browsing mode, quota exceeded) bằng try-catch và fallbacks.

Câu hỏi thường gặp (FAQ)

Từ khóa liên quan