Tổng quan về lưu trữ phía máy khách với JavaScript

Lưu trữ phía máy khách là điều cần thiết đối với các ứng dụng web. Nó có thể không chống đạn như bộ nhớ phía máy chủ nhưng nếu không có nó, các ứng dụng web sẽ không thể triển khai nhiều tính năng hiện đại. Tất cả các loại tính năng phụ thuộc vào bộ nhớ phía máy khách, từ phiên trong trò chơi đến giỏ hàng trên các trang web thương mại điện tử.

Bộ nhớ phía máy khách cũng cho phép các ứng dụng web triển khai kiến ​​trúc tập trung vào quyền riêng tư. Bạn có thể sử dụng nó để đảm bảo dữ liệu nhạy cảm không bao giờ rời khỏi thiết bị của người dùng.

Lưu trữ phía máy khách là gì?

Trong phát triển web, lưu trữ phía máy khách đề cập đến các cách khác nhau mà trình duyệt web có thể lưu trữ dữ liệu. Sau đó, một ứng dụng có thể sử dụng dữ liệu này để cung cấp chức năng cho người dùng. Bộ nhớ phía máy khách rất quan trọng vì một số lý do:

• Dữ liệu được lưu trữ trên ứng dụng khách nhanh hơn đáng kể để truy cập và ứng dụng của bạn có thể truy cập dữ liệu đó mà không cần Internet.
• Lưu trữ phía máy khách giúp ứng dụng của bạn ghi nhớ các tùy chọn của từng người dùng dễ dàng hơn.
• Lưu trữ một số dữ liệu vĩnh viễn trên máy khách giúp bảo vệ quyền riêng tư của người dùng dễ dàng hơn.
• Lưu trữ tất cả dữ liệu ứng dụng trên máy chủ là tốn kém, đặc biệt là ở quy mô lớn.

Có một số hình thức lưu trữ phía máy khách khác nhau mà bạn có thể sử dụng trong các ứng dụng web của mình.

Bánh quy

Cookie của trình duyệt là một phần dữ liệu khóa / giá trị được lưu trữ dưới dạng một chuỗi trên máy tính của bạn. Trình duyệt gửi tất cả cookie cho một trang web cụ thể đến máy chủ của trang web theo mọi yêu cầu. Cookie là loại lưu trữ phía máy khách đầu tiên (và trong một thời gian, là duy nhất).

Không có giới hạn chính thức về kích thước của cookie, nhưng các trình duyệt riêng lẻ đặt ra các giới hạn khác nhau về kích thước và số lượng cookie mà bạn có thể đặt. RFC 6265 Phần 6.1 nêu rõ các khả năng cookie tối thiểu sau đây mà trình duyệt (tác nhân người dùng) phải cung cấp:

Việc triển khai tác nhân người dùng thực tế có giới hạn về số lượng và kích thước cookie mà họ có thể lưu trữ. Tác nhân người dùng sử dụng chung NÊN cung cấp từng khả năng tối thiểu sau:

• Ít nhất 4096 byte cho mỗi cookie (được đo bằng tổng độ dài của tên, giá trị và thuộc tính của cookie).
• Ít nhất 50 cookie cho mỗi miền.
• Tổng số ít nhất 3000 cookie.

Cookie có thể ở trên trình duyệt trong các khoảng thời gian khác nhau. Một số hết hạn vào cuối phiên trang và một số có ngày hết hạn tùy ý có thể kéo dài đến hàng tháng trong tương lai.

Các trình duyệt tạo một phiên trang khi bạn mở một tab mới và chúng kết thúc khi bạn đóng tab hoặc trình duyệt. Nếu bạn tải lại hoặc làm mới trang, trình duyệt sẽ không kết thúc phiên trang.

Các trường hợp sử dụng cho cookie

Cookie phù hợp nhất để lưu trữ các phần dữ liệu nhỏ mà máy chủ thường xuyên cần đọc hoặc sửa đổi. Tại sao?

• Cookie tự động được đính kèm vào tất cả các yêu cầu mạng
• Cookie chỉ có thể lưu trữ một lượng nhỏ dữ liệu chuỗi.

Bạn có thể sử dụng cookie để xác định người dùng (như ID phiên), ghi lại lượt truy cập trang cho mục đích đánh dấu trang hoặc lưu trữ điểm số cao của trò chơi.

Lưu trữ cục bộ

Giống như cookie, localStorage là một kho khóa / giá trị lưu trữ dữ liệu chuỗi. Mặc dù cả hai loại lưu trữ đều giống nhau, localStorage và cookie khác nhau theo một số cách:

• LocalStorage phụ thuộc vào JavaScript.
• Dữ liệu trong localStorage chủ yếu nằm trên trình duyệt. Bạn phải cố tình gửi nó đến máy chủ, thay vì trình duyệt gửi nó theo mọi yêu cầu.
• LocalStorage không có ngày hết hạn. Nó vẫn tồn tại trên máy khách cho đến khi nhà phát triển xóa nó bằng JavaScript hoặc người dùng xóa bộ nhớ trình duyệt của họ.
• LocalStorage có dung lượng lưu trữ lớn hơn nhiều. Thông số WHATWG không chỉ định giới hạn cứng nhưng theo Wikipedia, kích thước tối thiểu của localStorage trong số các trình duyệt chính là 5 MB:

Trình duyệt giới hạn cookie ở 4 kilobyte. Lưu trữ web cung cấp dung lượng lưu trữ lớn hơn nhiều:

• Opera 10.50+ cho phép 5 MB
• Safari 8 cho phép 5 MB
• Firefox 34 cho phép 10 MB
• Google Chrome cho phép 10 MB cho mỗi bản gốc
• Internet Explorer cho phép 10 MB trên mỗi vùng lưu trữ

Các trường hợp sử dụng cho LocalStorage

LocalStorage hoàn hảo để lưu trữ một lượng lớn dữ liệu mà máy chủ hiếm khi cần tham chiếu. Đây có thể là cài đặt người dùng của ứng dụng, chi tiết cấu hình chủ đề hoặc dữ liệu trong biểu mẫu đã điền gần đây. Điều này là do localStorage có giới hạn lưu trữ lớn hơn nhiều so với cookie, nhưng bạn cần phải nỗ lực nhiều hơn để gửi dữ liệu của nó đến máy chủ.

Nếu bạn lưu trữ dữ liệu dưới dạng JSON, bạn có thể lưu trữ dữ liệu phức tạp hợp lý bằng cách sử dụng localStorage, mặc dù nó chỉ có thể lưu trữ các chuỗi.

LocalStorage dễ bị tấn công XSS, vì vậy bạn không nên lưu trữ dữ liệu khách hàng nhạy cảm trong đó.

SessionStorage

SessionStorage là một kho lưu trữ khóa / giá trị hoạt động gần giống như localStorage, ngoại trừ một điều. Dữ liệu được lưu trữ chỉ tồn tại trong khoảng thời gian của một phiên trang.

Các trường hợp sử dụng cho SessionStorage

Bạn có thể sử dụng SessionStorage để lưu trữ cùng một loại dữ liệu với localStorage, nhưng chỉ khi dữ liệu không cần tồn tại sau một phiên trang.

IndexedDB

IndexedDB là một API trình duyệt mạnh mẽ để lưu trữ lượng lớn dữ liệu có cấu trúc. Nó là một cơ sở dữ liệu hướng đối tượng, giao dịch, lưu trữ dữ liệu trong các cặp khóa / giá trị.

Nếu bạn đang xử lý lượng dữ liệu nhỏ hơn, localStorage / sessionStorage là lựa chọn tốt hơn, dễ dàng hơn. Thật không may, chúng bị giới hạn bởi dung lượng lưu trữ và thực tế là chúng chỉ có thể lưu trữ dữ liệu chuỗi. IndexedDB không chỉ cho phép lưu trữ các loại dữ liệu khác nhau bao gồm tệp / dữ liệu nhị phân, mà nó còn có thể lưu trữ nhiều dữ liệu hơn nữa. IndexedDB cũng xây dựng các chỉ mục của nội dung của nó để cho phép tìm kiếm nhanh cơ sở dữ liệu.

Các trường hợp sử dụng cho IndexedDB

IndexedDB về cơ bản là một cơ sở dữ liệu NoSQL trong trình duyệt và nó có thể lưu trữ một lượng rất lớn dữ liệu. Bất kỳ trường hợp sử dụng nào yêu cầu lưu trữ trên 10 MB dữ liệu đều thích hợp cho IndexedDB.

Không giống như các hình thức lưu trữ trình duyệt khác, IndexedDB không bị giới hạn trong việc lưu trữ các chuỗi. IndexedDB có thể lưu trữ dữ liệu của tất cả các loại JavaScript tiêu chuẩn. Nếu bạn xây dựng một ứng dụng web để hoạt động chủ yếu ngoại tuyến, bạn có thể sử dụng IndexedDB để lưu trữ tất cả dữ liệu của ứng dụng.

Bộ nhớ phía máy khách linh hoạt và mạnh mẽ

Thuật ngữ lưu trữ phía máy khách đề cập đến việc lưu trữ dữ liệu ứng dụng trong trình duyệt. Lưu trữ phía máy khách là điều cần thiết cho hoạt động của hầu hết các ứng dụng web hiện đại. Có nhiều loại lưu trữ phía máy khách: cookie, local / sessionStorage và IndexedDB.

Tất cả các loại bộ nhớ của trình duyệt đều có các giới hạn khác nhau về dung lượng và loại dữ liệu chúng có thể lưu trữ. Cookie là loại hạn chế nhất, local / sessionStorage là tiện lợi nhất và IndexedDB là loại mạnh nhất.