Cách Trình duyệt Lưu trữ Dữ liệu

Trình duyệt không chỉ đơn thuần là hiển thị các trang web. Chúng đóng vai trò như những trình quản lý dữ liệu cục bộ. Chúng lưu trữ thông tin trên thiết bị của bạn để giúp việc duyệt web nhanh hơn và dễ dàng hơn.

Bạn nên biết ba cách chính mà trình duyệt lưu trữ dữ liệu:

• Cookies • Bộ nhớ đệm trình duyệt (Browser Cache) • Web Storage

Cookies

Cookies là các tệp văn bản nhỏ. Các trang web sử dụng chúng để ghi nhớ bạn. Chúng lưu trữ các phiên đăng nhập và cài đặt ngôn ngữ của bạn.

Cách thức hoạt động:

• Bạn truy cập một trang web.
• Trang web gửi một cookie đến trình duyệt của bạn.
• Trình duyệt của bạn lưu lại cookie đó.
• Trong lần truy cập tiếp theo, trình duyệt của bạn sẽ gửi lại cookie đó cho máy chủ.

Lưu ý:

• Cookies có giới hạn dung lượng rất nhỏ, chỉ 4KB.
• Chúng được gửi kèm theo mỗi yêu cầu, điều này có thể làm chậm tốc độ.
• Đừng bao giờ lưu mật khẩu trong cookies.

Browser Cache

Bộ nhớ đệm (Cache) lưu trữ các tệp nặng như hình ảnh, CSS và JavaScript. Mục tiêu của nó là tốc độ.

Cách thức hoạt động:

• Bạn truy cập một trang web lần đầu tiên.
• Trình duyệt của bạn tải xuống tất cả các tệp và lưu chúng vào bộ nhớ đệm.
• Lần tới khi bạn truy cập, trình duyệt sẽ tải các tệp từ thiết bị của bạn thay vì từ internet.

Lợi ích:

• Các trang web tải nhanh hơn nhiều.
• Tiết kiệm băng thông internet hơn.
• Giảm tải cho máy chủ.

Web Storage

Đây là một tính năng của HTML5. Nó cho phép các trang web lưu trữ dữ liệu dưới dạng các cặp khóa-giá trị (key-value pairs). Nó hiệu quả hơn cookies vì không bị gửi đến máy chủ trong mỗi yêu cầu.

Có hai loại:

• Local Storage: Dữ liệu vẫn được giữ lại ngay cả khi bạn đóng trình duyệt. Nó có dung lượng khoảng 5MB đến 10MB.
• Session Storage: Dữ liệu sẽ biến mất khi bạn đóng tab.

Trường hợp sử dụng:

• Local storage rất tuyệt vời cho các cài đặt chế độ tối (dark mode).
• Session storage hoạt động tốt cho các dữ liệu biểu mẫu tạm thời.

Tóm tắt

• Sử dụng Cookies cho các phiên đăng nhập và giao tiếp với máy chủ.
• Sử dụng Cache để tăng tốc độ tải trang với các tài nguyên tĩnh.
• Sử dụng Web Storage cho lượng lớn dữ liệu ở phía máy khách (client-side).

Source: https://dev.to/dailycodetools/how-browser-stores-data-cookies-cache-storage-25-jun-0346-m7h