HTML5 19 – Web Storage trong HTML5

0
466

Xin chào các bạn, bài 19 trong series học HTML5, chúng ta sẽ cùng tìm hiểu về Web Storage, cách sử dụng Web Storage để lưu trữ dữ liệu website ngay tại máy khách client, lưu trữ tại trình duyệt brower.

Web Storage là gì?

Web Storage hay còn gọi là Kho lưu Web là một tính năng mới của HTML5. Nó được tạo ra để lưu trữ dữ liệu của người dùng ở dưới local giống như cookie.

Web Storage và Cookie khác nhau như thế nào ? Tại sao nên dùng HTML Web Storage ?

HTML5 giới thiệu hai kỹ thuật, tương tự như HTTP Cookie, để lưu giữ dữ liệu được cấu trúc trên Client-Side và để khắc phục những nhược điểm của Cookie sau:

  • Các Cookie được bao gồm với mỗi Yêu cầu HTTP (HTTP request), do đó làm chậm trình duyệt web của bạn bằng việc truyền tải dữ liệu giống nhau.
  • Các Cookie được bao gồm với mỗi Yêu cầu HTTP (HTTP request), do đó gửi dữ liệu không được mật mã hóa qua Internet (không có tính bảo mật).
  • Các Cookie bị giới hạn khoảng 4 KB dữ liệu. Không đủ để lưu giữ dữ liệu cần thiết.

Vì vậy Web Storage ra đời. Gồm 2 kỹ thuật lưu trữ: session storage và local storage. Mỗi nơi được sử dụng để giải quyết các vấn đề tình huống khác nhau.

Ưu điểm của Web Storage

Web Storage có thể lưu trữ một lượng data lớn từ 2MB tới 10MB. Giới hạn này phụ thuộc vào browser, protocol (HTTP hoặc HTTPS).

  • Web Storage an toàn hơn: người dúng khó mà có thể tìm ra file lưu Web Storage để sửa data. Tuy vậy thì chúng ta vẫn có thể sửa data Web Storage khi F12 trên trình duyệt.
  • Web Storage cũng lưu trữ ở dưới local nhưng nó không bao giờ được gửi tới web server vì vậy mà không ảnh hưởng tới băng thông.
  • Data được lưu trữ trên một trình duyệt nên không thể truy xuất trên trình duyệt khác.
  • Data được lưu trữ dưới dạng chuỗi JSON.
  • Web Storage là tính năng của HTML5 nhưng nó hỗ trợ đến cả những phiên bản trình duyệt cũ mà hiện tại ít ai dùng.

Hỗ trợ trình duyệt

Các phiên bản mới nhất của trình duyệt hỗ trợ HTML5 Storage bao gồm IE.

Ứng dụng của Web Storage

  • Dùng để lưu những data của user mà được sử dụng nhiều lần trên các phiên làm việc khác nhau (một phiên làm việc được tính là một lần đóng mở tab).
  • Dùng cho các ứng dụng SPA ( Single page application). Thông thường khi xử lí dữ liệu thao tác của user trên 1 page thì chúng ta lưu vào biến javascript. Còn nếu muốn share dữ liệu giữa các page thì có thể dùng Web Storage. Ví dụ lưu thông tin đăng nhập của user, lưu thông tin giỏ hàng, …
  • Không dùng Web Storage để lưu các dữ liệu quan trọng như mật khẩu người dùng, …

Làm việc với web storage

Có 2 loại storage:

  • localStorage – dữ liệu được lưu mãi mãi kể cả khi đóng tab hoặc đóng trình duyêt. Dữ liệu chỉ mất khi clear history.
  • sessionStorage – dữ liệu được lưu trong 1 phiên làm việc. Dữ liệu mất khi người dùng đóng tab.

Trước khi sử dụng web storage, bạn nên kiểm tra trình duyệt của người dùng có hỗ trợ localStorage và sessionStorage hay không:

Local Storage

localStorage được sử dụng để chứa những dữ liệu không giới hạn thời gian. Những dữ liệu này sẽ không bị xóa khi người dùng đóng cửa sổ trình duyệt.

Lưu data

Dữ liệu được lưu dưới dạng key:value. Tùy vào dữ liệu mà chúng ta có các cách lưu khác nhau. Với dữ liệu đơn giản thì lưu key value như một chuỗi đơn giản. Với dữ liệu phức tạp thì nên lưu value dưới dạng chuỗi JSON, khi lưu dữ liệu dùng JSON.stringify() còn khí lấy dữ liệu dùng JSON.parse(). Vì dữ liệu được lưu dưới dạng string nên khi lấy ra có thể cần phải xử lí bằng cách dùng các hàm parseInt(), parseFloat(),

Ví dụ:

Ví dụ bên trên có thể được viết theo cách khác như sau:

Lấy Data

Xóa Data

Lưu trữ dữ liệu trên thiết bị nội bộ có thể là nguy hiểm và có thể để lại một lỗ hổng bảo mật.

Cú pháp để xóa “key” trong localStorage như sau:

Lưu ý: Cả tên và giá trị đều được lưu dưới dạng chuỗi ký tự. Bạn nhớ chuyển đổi chúng nếu muốn sử dụng sử dụng ở định dạng khác (ví dụ kiểu số).

Ví dụ dưới đây dùng để đếm số lần mà người dùng đã nhấn vào nút. Lúc này, giá trị lưu trữ cần phải được chuyển đổi sang kiểu số trước khi sử dụng:

SessionStorage

sessionStorage hoạt động giống như localStorage ngoại trừ việc nó chỉ lưu trữ dữ liệu trên một phiên làm việc. Dữ liệu sẽ bị xóa khi người dùng đóng cửa sổ trình duyệt.

Ví dụ dưới đây cũng sử dụng để đếm số lần người dùng đã nhấn vào nút, nhưng kết quả chỉ được lưu trong phiên làm việc hiện tại:

Kết luận

Như vậy chúng ta đã tìm hiểu xong về Web Storage trong HTML5, không dễ đúng không nào. Đây là kiến thức hơi nâng cao, đòi hỏi các bạn phải có kiến thức về cookie, cách thức viết code Javascript, cách xây dựng các phương thức, …

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây