Trong bài đăng này, tôi sẽ nói về cách cookie so sánh với bộ nhớ của trình duyệt. Bạn sẽ hiểu tại sao cookie ra đời, vấn đề chúng giải quyết và những hạn chế của chúng
Sau đó, bạn sẽ khám phá bộ nhớ trình duyệt là gì và tìm hiểu sâu hơn về bộ nhớ cục bộ và bộ nhớ phiên. Bạn sẽ xem xét các tính năng của chúng, nơi chúng có thể hữu ích và cách sử dụng chúng qua JavaScript
Sau đó, bạn sẽ thấy cách bạn có thể đối chiếu các tính năng, ưu điểm và nhược điểm của từng loại cũng như nêu bật các trường hợp sử dụng cụ thể của từng loại
Bạn cũng sẽ xem xét các phương pháp hoặc cách tiếp cận tốt nhất cần ghi nhớ trong khi sử dụng từng phương pháp và nơi tốt nhất để lưu trữ JWT hoặc mã thông báo xác thực của bạn
Đã bao nhiêu lần bạn thấy một cửa sổ bật lên trên một trang web có nội dung
Trang web này đang sử dụng cookie để lưu trữ thông tin của bạn
Tôi đoán rất thường xuyên rằng bạn đã mất số đếm
Cookie đã được sử dụng từ thời xa xưa để lưu trữ thông tin liên quan đến phiên của người dùng. Điều này cho phép các trang web cung cấp trải nghiệm độc đáo và hấp dẫn cho người dùng của họ
Tuy nhiên, cookie có thể hơi khó sử dụng, trường hợp sử dụng hạn chế và dung lượng lưu trữ dữ liệu nhỏ. Để chống lại điều này, các trình duyệt hiện đại đi kèm với các cơ chế lưu trữ của riêng chúng như lưu trữ cục bộ và lưu trữ phiên
Trong bài đăng này, tôi sẽ nói về các cơ chế lưu trữ này. Bạn sẽ hiểu cách bộ nhớ cục bộ, bộ nhớ phiên và cookie so sánh với nhau và khám phá các trường hợp sử dụng phổ biến của từng loại. Đến cuối bài này, bạn sẽ biết chính xác khi nào nên sử dụng cái nào
Sơ lược về lịch sử của cookie
Hãy xem lại lịch sử của cookie
Ngày trước, các trang web sử dụng giao thức HTTP không trạng thái. Điều này có nghĩa là họ không thể lưu trữ thông tin liên quan đến người dùng như id phiên của người dùng, tên của người dùng, v.v. , trong trình duyệt
Khi web phát triển và trở nên phổ biến hơn, các trang web bắt đầu lưu trữ thông tin liên quan đến người dùng trong chính trình duyệt. Điều này giúp họ phân biệt loại người dùng nào đang tương tác với trang web của họ và cung cấp trải nghiệm được cá nhân hóa cho người dùng
Nhập Cookie
Đó là cách cookie ra đời. Họ đã trình bày một cơ chế lưu trữ dữ liệu phía máy khách hoặc máy chủ nhẹ trên trình duyệt dưới dạng các cặp giá trị chính. Chúng cũng có dấu thời gian hết hạn mà sau đó chúng sẽ bị trình duyệt tự động xóa
Ngoài ra, cả trình duyệt và máy chủ đều có thể đặt và truy xuất cookie từ trình duyệt của người dùng. Hơn nữa, những cookie này được gửi tự động cùng với mỗi yêu cầu HTTP. Điều này rất hữu ích cho các trang web phía máy chủ vào thời điểm mà các ứng dụng trang đơn không phải là một thứ. Họ có thể dễ dàng phân biệt thông tin của người dùng với mỗi yêu cầu HTTP mà người dùng đã thực hiện
Sự trỗi dậy của bộ nhớ trình duyệt
Trường hợp cookie giải quyết được một vấn đề lớn, nó có một số hạn chế. Đầu tiên, chúng chỉ có thể lưu trữ dữ liệu tối đa vài kbs. Khi các ứng dụng phía máy khách trở nên phức tạp hơn, cần phải lưu trữ dữ liệu phức tạp hơn trong trình duyệt
Với sự khởi đầu của HTML5, các trang web đã được giới thiệu API lưu trữ trình duyệt để lưu trữ thông tin phía máy khách. Các API này đã có sẵn trên các đối tượng cửa sổ của trình duyệt trên toàn cầu. Do đó, bất kỳ JavaScript nào đang chạy trong trình duyệt đều có thể dễ dàng truy cập chúng. Điểm khác biệt chính là chúng có dung lượng lưu trữ dữ liệu cao hơn và chỉ có thể được truy cập bằng JavaScript phía máy khách
Trình duyệt triển khai hai cơ chế lưu trữ — lưu trữ cục bộ và lưu trữ phiên. Vì vậy, hãy khám phá và hiểu chúng một cách chi tiết
Lưu trữ phiên của trình duyệt
Trước tiên, hãy xem qua vị trí lưu trữ phiên trong trình duyệt
Mở các công cụ dành cho nhà phát triển trong trình duyệt và chuyển đến tab "Ứng dụng"
Trong phần lưu trữ, bạn sẽ tìm thấy một phần có tên "Session Storage"
- Nhấp vào nó và bạn sẽ có thể xem bộ nhớ phiên cho trang web đó
nó đây rồi. Bây giờ, hãy xem các tính năng lưu trữ phiên của trình duyệt
Khả năng lưu trữ
Lưu trữ phiên có thể lưu trữ dữ liệu trong khoảng từ 5mb - 10mb. Lượng dung lượng lưu trữ chính xác khác nhau tùy theo cách triển khai của từng trình duyệt, nhưng cookie cung cấp dung lượng lưu trữ lớn hơn 4kb
Tính bền vững của dữ liệu
Như tên gợi ý, lưu trữ phiên chỉ lưu trữ dữ liệu miễn là tab trình duyệt được mở. Điều này có nghĩa là mỗi khi bạn mở một tab mới hoặc một cửa sổ trình duyệt mới, một bộ nhớ phiên mới sẽ được tạo. Vì vậy, mọi dữ liệu bạn lưu trữ bên trong bộ lưu trữ phiên sẽ tự động bị xóa khi bạn đóng tab/cửa sổ đó
Sử dụng lưu trữ phiên
Bạn có thể truy cập bộ nhớ phiên trong đối tượng
sessionStorage.setItem["id", "123"]window.sessionStorage
//Storage {length: 0}Điều này sẽ trả về độ dài của bộ nhớ phiên cùng với một đối tượng đại diện cho dữ liệu hiện có bên trong. Vì nó trống để bắt đầu, độ dài là 0. Lưu ý rằng bạn cũng có thể truy cập trực tiếp đối tượng
sessionStorage.setItem["id", "123"]Thêm dữ liệu
Hãy thêm một cặp khóa-giá trị vào bộ lưu trữ phiên bằng hàm
sessionStorage.setItem["id", "123"]sessionStorage.setItem["id", "123"]sessionStorage.setItem["id", "123"]Thao tác này sẽ đặt một mục mới trong bộ lưu trữ phiên với khóa
sessionStorage.setItem["id", "123"]sessionStorage.setItem["id", "123"]sessionStorage.setItem["id", "123"]Giờ đây, bạn sẽ lấy lại được dữ liệu đã thêm gần đây của mình
Bạn cũng sẽ thấy điều này bên trong phần lưu trữ phiên của tab ứng dụng của trình duyệt
Chèn dữ liệu JSON phức tạp
Hãy thêm một đối tượng JSON phức tạp hơn một chút vào bộ lưu trữ phiên trông như thế này
const data = {
_id: "61c6c1df7cda7d370a9ef601",
index: 0,
guid: "13672f0e-f693-4704-a6f9-839ff36e8960",
isActive: true,
balance: "$3,602.49",
picture: "//placehold.it/32x32",
age: 25,
friends: [
{
id: 0,
name: "Adkins Coleman",
},
{
id: 1,
name: "Howe Douglas",
},
{
id: 2,
name: "Becky Velez",
},
],
}Trước tiên, bạn cần xâu chuỗi hóa nó vì giá trị đối với khóa chỉ có thể là một chuỗi. Sau đó, bạn sẽ lưu trữ nó bên trong bộ lưu trữ phiên sử dụng phương pháp
sessionStorage.setItem["id", "123"]sessionStorage.setItem["id", "123"]Bây giờ nó sẽ xuất hiện bên trong bộ lưu trữ phiên của tab ứng dụng của trình duyệt
Thật tuyệt vời. Chúng ta hãy xem việc truy xuất dữ liệu này
Truy xuất dữ liệu
Bạn có thể sử dụng hàm
sessionStorage.setItem["id", "123"]sessionStorage.setItem["id", "123"]Nếu bạn đang truy xuất một đối tượng, trước tiên bạn cần sử dụng
sessionStorage.setItem["id", "123"]sessionStorage.setItem["id", "123"]ca sử dụng
Do dữ liệu trong lưu trữ phiên chỉ tồn tại trên tab trình duyệt nên có một số trường hợp sử dụng duy nhất cho lưu trữ phiên
Lưu trữ phiên có thể được sử dụng trong các quy trình gồm nhiều bước phải được thực hiện trong một phiên bản duy nhất. Điều này bao gồm đặt vé máy bay, khách sạn, vé xem phim, đặt chỗ tàu, v.v. Bạn có thể lưu trữ thông tin chi tiết của các bước trước đó trong bộ lưu trữ phiên của trình duyệt để điền trước các biểu mẫu hoặc đầu vào đó
Vì đây là những hoạt động quan trọng phải được thực hiện trong một lần nên dữ liệu sẽ tự động bị xóa khi người dùng chuyển sang tab mới hoặc cửa sổ trình duyệt mới
Nhắc đăng nhập/đăng ký cho người dùng
Trang web viết blog, bản tin, trang web hướng dẫn, v.v. , có rất nhiều khách truy cập đọc qua nội dung mà không cần tạo tài khoản. Trong những trường hợp như vậy, bạn có thể khéo léo nhắc người dùng mỗi khi họ truy cập trang web để tạo tài khoản. Bạn có thể theo dõi phiên của từng người dùng trong bộ lưu trữ phiên
Mỗi khi người dùng đọc một bài đăng trên blog hoặc một bài báo trên một tab khác, bạn có thể yêu cầu họ tạo một tài khoản. Đây có thể là một cách tuyệt vời để cung cấp trải nghiệm không bị chặn cho người dùng của bạn đồng thời chuyển đổi họ thành người dùng đã đăng ký cho trang web của bạn một cách hiệu quả
Bộ nhớ cục bộ của trình duyệt
Trong tab ứng dụng chứa bộ nhớ phiên, bạn sẽ tìm thấy một phần có tên là bộ nhớ cục bộ ngay bên dưới nó
Đó là nơi bạn có thể xem mọi thứ bạn lưu trữ bên trong bộ nhớ cục bộ của trình duyệt. Lưu trữ cục bộ hoạt động, xuất hiện và tương tự như lưu trữ phiên. Chẳng hạn, giống như Lưu trữ phiên, lưu trữ cục bộ cũng có thể lưu trữ dữ liệu trong khoảng từ 5mb - 10mb tùy thuộc vào cách triển khai của trình duyệt
Tính bền vững của dữ liệu
Không giống như lưu trữ phiên, nơi dữ liệu sẽ tự động bị xóa khi đóng tab hoặc cửa sổ trình duyệt, dữ liệu trong bộ nhớ cục bộ không có thời hạn sử dụng mặc định. Nó chỉ bị xóa nếu bạn trực tiếp xóa dữ liệu đó khỏi bộ nhớ cục bộ theo cách thủ công, thông qua cài đặt trình duyệt hoặc thông qua mã JavaScript của bạn
Điều đó có nghĩa là dữ liệu trong bộ nhớ cục bộ vẫn tồn tại ngay cả sau khi đóng một tab cụ thể hoặc cửa sổ trình duyệt
Sử dụng bộ nhớ cục bộ
Bạn có thể thêm và truy xuất dữ liệu từ bộ nhớ cục bộ giống như cách bạn thực hiện các thao tác đó với bộ nhớ phiên. Thay đổi duy nhất là bây giờ bạn sẽ phải sử dụng đối tượng
sessionStorage.setItem["id", "123"]Chẳng hạn, bạn có thể thêm một mục vào
sessionStorage.setItem["id", "123"]sessionStorage.setItem["id", "123"]Do đó, bạn có thể truy xuất một mục bằng hàm
sessionStorage.setItem["id", "123"]sessionStorage.setItem["id", "123"]ca sử dụng
Bộ nhớ cục bộ có một số cách sử dụng do thực tế là dữ liệu bên trong nó không có thời hạn sử dụng mặc định. Hãy nghĩ về tất cả các tình huống mà bạn muốn lưu trữ một số dữ liệu chung thường được truy cập trong ứng dụng của mình
Chung
Chẳng hạn, id email, tên người dùng, tên đầy đủ của người dùng, v.v. Tất cả những dữ liệu này được sử dụng rộng rãi trên các trang khác nhau trong ứng dụng của bạn. Lưu trữ dữ liệu này bên trong bộ nhớ cục bộ sẽ giúp bạn ngăn các lệnh gọi API không mong muốn đến máy chủ để tìm nạp dữ liệu này. Ngoài ra, vì dữ liệu này thường không thay đổi thường xuyên nên khả năng có dữ liệu không nhất quán trên trình duyệt và máy chủ là khá thấp
Bạn cũng có thể sử dụng nó để lưu trữ dữ liệu cụ thể của ứng dụng không thay đổi trong suốt phiên đăng nhập của người dùng. Chẳng hạn, nếu bạn có trang web thương mại điện tử, bạn có thể lưu tùy chọn thanh toán ưa thích của người dùng, địa chỉ giao hàng mặc định, v.v. Bạn cũng có thể lưu trữ các tùy chọn của người dùng, chẳng hạn như chủ đề mà người dùng thích cho trang web của bạn [chế độ tối hoặc sáng]
Cookie so với. Lưu trữ trình duyệt
Bây giờ bạn đã hiểu cách hoạt động của bộ nhớ trình duyệt, bạn có thể so sánh chúng một cách hiệu quả với cookie. Tuy nhiên, trước tiên chúng ta hãy nhìn vào những điểm giống nhau của chúng
Hãy nhớ rằng lúc đầu tôi đã hỏi bạn rằng bạn đã thấy cửa sổ bật lên cookie đó bao nhiêu lần?
Nói cách khác, người dùng có thể chặn cookie và bộ nhớ của trình duyệt cũng vậy. Người dùng có thể chọn không cho phép dữ liệu của họ được lưu trữ thông qua bất kỳ cơ chế nào trong số này — và do đó, ứng dụng của bạn không bao giờ nên hoàn toàn dựa vào các cơ chế lưu trữ này
Cả cookie và bộ lưu trữ trình duyệt đều lưu trữ các cặp khóa-giá trị dưới dạng chuỗi và được hỗ trợ tốt trong tất cả các trình duyệt hiện đại. Người dùng cũng có thể dễ dàng chỉnh sửa dữ liệu bên trong này
sự khác biệt
Bạn biết rằng bộ nhớ trình duyệt có dung lượng lưu trữ lớn hơn cookie. Do đó, lưu trữ trình duyệt luôn là lựa chọn tốt hơn cookie để lưu trữ dữ liệu lớn phía máy khách
Tuy nhiên, vì lưu trữ phiên và lưu trữ cục bộ có độ bền dữ liệu khác nhau, bạn nên cẩn thận chọn một trong hai tùy thuộc vào khoảng thời gian bạn muốn dữ liệu tồn tại
Cookie cho phép bạn tự động đặt TTL hoặc thời gian hết hạn; . Các tính năng này bị thiếu trong bộ nhớ trình duyệt. Điều này đưa chúng ta đến câu hỏi — cookie sẽ thực sự hữu ích hơn bộ nhớ trình duyệt ở đâu?
Câu trả lời là dữ liệu phía máy chủ. Nếu bạn đã từng xử lý xác thực trước đây, bạn biết rằng tại một số thời điểm, bạn cần lưu trữ mã thông báo xác thực hoặc JWT của người dùng ở nơi có thể truy cập dễ dàng. Đó là nơi cookie hữu ích. Nhưng tại sao chúng ta không thể sử dụng hoặc tại sao chúng ta không nên sử dụng bộ nhớ trình duyệt ở đây?
Lưu trữ mã thông báo JWT/Auth của bạn
Dữ liệu như mã thông báo JWT hoặc Auth không được lưu trữ trong bộ lưu trữ của trình duyệt vì chúng có thể được truy cập bởi bất kỳ JavaScript phía máy khách nào đang chạy trong trình duyệt. Điều này có nghĩa là nếu ứng dụng của bạn bằng cách nào đó để lại lỗ hổng XSS, mã thông báo xác thực người dùng của bạn có thể dễ dàng bị rò rỉ cho kẻ tấn công
Sau đó, kẻ tấn công có thể thực hiện các yêu cầu sai, sửa đổi dữ liệu người dùng của bạn trong cơ sở dữ liệu và gây ra nhiều thiệt hại cho ứng dụng của bạn cũng như người dùng. Do đó, tốt nhất là luôn lưu trữ JWT trong cookie chỉ http. Cookie chỉ http là cookie đặc biệt mà JavaScript phía máy khách không thể truy cập được. Bằng cách này, chúng an toàn trước các cuộc tấn công XSS
Ngoài ra, mã thông báo xác thực thường được làm mới khi hết hạn và người ta có thể dễ dàng sử dụng cookie TTL để quản lý điều đó. Đối với các trường hợp đơn giản hơn, người ta cũng có thể lưu trữ JWT bên trong các cookie thông thường bằng cách đặt TTL
Nhưng nhìn chung, bản thân xác thực có thể là một chủ đề phức tạp. Nếu bạn đang tìm kiếm một nền tảng nhận dạng không cần mã có thể xử lý xác thực cho ứng dụng của mình một cách liền mạch, hãy cân nhắc sử dụng LoginRadius
Kết thúc nó
Bây giờ bạn đã hiểu dung lượng lưu trữ của trình duyệt mạnh mẽ như thế nào, đừng ngại sử dụng nó trong các ứng dụng của bạn. Sử dụng cookie cho dữ liệu phía máy chủ khi bạn cần TTL, lưu trữ phiên cho các trường hợp sử dụng cụ thể đã thảo luận ở trên và lưu trữ cục bộ để quản lý dữ liệu chung trong ứng dụng của bạn
Tuy nhiên, hãy tránh mẫu mà ứng dụng trang đơn của bạn tương tác trực tiếp với bộ nhớ cục bộ. Ví dụ: nếu bạn đang sử dụng React với Redux để quản lý trạng thái trong ứng dụng của mình, hãy để bộ giảm tốc của bạn kiểm soát những gì đi và đến từ bộ nhớ cục bộ. Các thành phần React của bạn nên được trừu tượng hóa khỏi việc sử dụng trực tiếp bộ nhớ cục bộ
Cuối cùng, vì dữ liệu bộ nhớ cục bộ không có thời hạn sử dụng mặc định, nên hãy thay đổi thời điểm bạn xóa dữ liệu này để tránh sự không nhất quán dữ liệu giữa giao diện người dùng và chương trình phụ trợ của bạn