Lưu Trữ và Truy Xuất Dữ Liệu LocalStorage Giữa Các Trang JavaScript: Hướng Dẫn Chi Tiết

Bạn đang gặp khó khăn trong việc chia sẻ dữ liệu giữa các trang web JavaScript? Bài viết này sẽ hướng dẫn bạn cách sử dụng LocalStorage để lưu trữ dữ liệu một cách hiệu quả và truy xuất nó từ bất kỳ trang nào trong cùng một domain. Chúng tôi sẽ đi sâu vào các ví dụ cụ thể, giúp bạn dễ dàng áp dụng vào dự án của mình.

LocalStorage là gì và tại sao nên sử dụng?

LocalStorage là một web API cho phép bạn lưu trữ dữ liệu trong trình duyệt của người dùng. Dữ liệu này sẽ tồn tại ngay cả khi người dùng đóng trình duyệt hoặc chuyển sang trang web khác trong cùng một domain. Điều này rất hữu ích trong nhiều trường hợp, ví dụ:

• Lưu trữ thông tin người dùng (ví dụ: tên đăng nhập, tùy chọn giao diện).
• Lưu trữ trạng thái của ứng dụng (ví dụ: giỏ hàng, các bước đã hoàn thành).
• Chia sẻ dữ liệu giữa các trang web khác nhau trong cùng một domain.

So với Cookie, LocalStorage có dung lượng lưu trữ lớn hơn (5-10MB) và không bị gửi kèm theo mỗi request lên server, giúp cải thiện hiệu suất website.

Truyền Dữ Liệu Giữa Các Trang Sử Dụng LocalStorage

Giả sử bạn có hai trang web: trang đầu tiên (`page1.html`) yêu cầu người dùng nhập mật khẩu thông qua một hộp thoại prompt và lưu trữ mật khẩu này trong LocalStorage. Trang thứ hai (`page2.html`) sẽ lấy mật khẩu này từ LocalStorage và hiển thị nó.

Trang đầu tiên (page1.html)

Trong đoạn code trên, chúng ta sử dụng hàm `prompt()` để lấy mật khẩu từ người dùng. Sau đó, sử dụng `localStorage.setItem('password', pass)` để lưu trữ mật khẩu này với key là `"password"`. Cuối cùng, chúng ta chuyển hướng người dùng đến trang thứ hai (`page2.html`).

Trang thứ hai (page2.html)

Ở trang này, chúng ta sử dụng `localStorage.getItem('password')` để lấy mật khẩu đã lưu trữ. Sau đó, sử dụng `document.getElementById('main').innerHTML` để hiển thị mật khẩu này trong một thẻ div có id là `"main"`.

Lưu ý quan trọng

• Dữ liệu trong LocalStorage được lưu trữ dưới dạng string. Nếu bạn muốn lưu trữ các kiểu dữ liệu khác (ví dụ: number, object), bạn cần chuyển đổi chúng sang string trước khi lưu và chuyển đổi ngược lại sau khi lấy ra.
• Dữ liệu trong LocalStorage có thể bị truy cập bởi bất kỳ script nào trong cùng một domain. Do đó, không nên lưu trữ các thông tin nhạy cảm (ví dụ: mật khẩu, thông tin thẻ tín dụng) trong LocalStorage.
• Để đảm bảo tính bảo mật, hãy kiểm tra và làm sạch dữ liệu trước khi hiển thị lên trang web.

Kết luận

LocalStorage là một công cụ hữu ích để lưu trữ và chia sẻ dữ liệu giữa các trang web JavaScript. Tuy nhiên, cần lưu ý đến các vấn đề bảo mật và hiệu suất để sử dụng nó một cách hiệu quả nhất. Hy vọng bài viết này đã cung cấp cho bạn những kiến thức cần thiết để bắt đầu sử dụng LocalStorage trong dự án của mình. Chúc bạn thành công!