Local Storage là một trong những kỹ thuật client caching thú vị được sử dụng tương đối phổ biến trong các trang web HTML5. Trong bài viết hôm nay, aetc.edu.vn sẽ cùng bạn giải mã kỹ thuật này, cùng với những điều cần biết để sử dụng Local Storage một cách an toàn.

Local Storage là gì?

Local Storage là một tính năng mới được trang bị cho HTML5, cho phép bạn lưu trữ dữ liệu cục bộ trên máy client thông qua JavaScript. Dữ liệu lưu trong Local Storage được lưu theo cặp key-value và không có thời hạn, nghĩa là mọi thứ vẫn sẽ được giữ lại kể cả khi cửa sổ trình duyệt đã đóng.

Những tính năng client caching như Local Storage được tạo ra để tăng hiệu suất website, khi dữ liệu người dùng không cần phải tải lại từ server liên tục trong quá trình duyệt web.

Đặc điểm của Local Storage

Thoạt nhìn vào định nghĩa, rất dễ để cho rằng Local Storage trông không khác lắm so với Cookie, tuy nhiên có vài điểm khác biệt lớn giữa Cookie và Local Storage:

• Về kích thước, Cookie chỉ cho phép lưu trữ đến 4KB dữ liệu, nghĩa là chỉ những thông tin cơ bản như username mới phù hợp. Trong khi đó Local Storage cho phép lưu đến 5MB, nhiều hơn hàng ngàn lần và do đó cũng có nhiều không gian hơn để caching dữ liệu.
• Về phạm vi, Local Storage chỉ lưu dữ liệu cục bộ mà không chuyển về các máy chủ như cookie.
• Về thời hạn, Local Storage không cung cấp mặc định tính năng tự động hủy dữ liệu hết hạn, trong khi bạn có thể đặt thời hạn cho cookie.

Local Storage có tính đồng bộ (synchronous), nghĩa là không thể truy cập song song mà nó sẽ đáp ứng từng lời gọi thực thi theo thứ tự.

Một điểm trừ lớn khác của Local Storage là nó không có phương thức nào để bảo vệ dữ liệu lưu trên trình duyệt. Bất cứ đoạn mã javascript nào trong website cũng có thể truy cập các giá trị lưu trữ trong Local Storage.

Local Storage hoạt động như thế nào?

Local Storage cung cấp 5 phương thức để quản lý việc lưu dữ liệu cho các ứng dụng web:

setItem()

Đây là phương thức để thêm cặp giá trị key-value vào local storage. Phần key là tên object dùng để truy cập, trong khi value chỉ có thể lưu trữ giá trị là một string. Ví dụ:

Nếu muốn lưu trữ một object, bạn chỉ cần chuyển nó về dạng chuỗi JSON thông qua phương thức quen thuộc JSON.stringify() của JavaScript:

getItem()

getItem() nhận vào key và trả về value tương ứng của object đã lưu trong Local Storage của browser. Ví dụ lệnh sau

Sẽ trả về chuỗi “{“name”:”Harry Potter”,”location”:”Hogwarts”}”

Để chuyển chuỗi này về lại dạng object để sử dụng,ta có lệnh JSON.parse()

removeItem()

Lệnh removeItem() nhận tham số là key và nó sẽ xóa object tương ứng khỏi Local Storage. Cú pháp

Sẽ xóa object có key là ‘name’ khỏi bộ nhớ.

clear()

Lệnh này sẽ xóa toàn bộ Local Storage được tạo bởi website hiện tại

key()

Lệnh này nhận tham số là index và trả về tên key của object có index tương ứng trong Local Storage. key() thường được sử dụng để duyệt qua toàn bộ các object trong Local Storage.

Những lưu ý khi sử dụng Local Storage

• Không lưu trữ dữ liệu nhạy cảm trên Local Storage, do không có phương thức bảo mật nào được áp dụng. Mặc dù các domain không thể truy cập chéo Local Storage của nhau, các cuộc tấn công cross-site scripting vẫn có thể khiến mật khẩu hay những thứ nhạy cảm khác trong Local Storage bị lộ.
• Local Storage không phải giải pháp thay thế các Database tại server do nó chỉ lưu dữ liệu trên trình duyệt dưới dạng string, với kích thước giới hạn.
• Giới hạn 5MB có thể lớn nếu so với cookie nhưng để cache nguyên một web application chạy không cần server thì vẫn khá giới hạn.
• Local Storage là đồng bộ, do đó không thể đáp ứng đồng thời các yêu cầu dữ liệu.

Local Storage vs Session Storage

Một trong những đặc điểm của Local Storage là nó không tự xóa khi đóng trình duyệt. Do đó nếu muốn hủy dữ liệu sau mỗi phiên, HTML5 cung cấp một phương thức khác là Session Storage. Về cơ bản Session Storage giống hệt Local Storage nhưng nó chỉ lưu dữ liệu cho một phiên làm việc, khiến chúng là những khái niệm hoàn toàn khác nhau và có mục đích sử dụng khác nhau.

Local Storage là một tính năng hay của HTML5, giúp việc cache dữ liệu trên trình duyệt dễ dàng hơn và nhiều không gian hơn cho đa dạng mục đích sử dụng. Tuy nhiên không nên lạm dụng Local Storage để lưu trữ thông tin nhạy cảm do những hạn chế bảo mật.

Hi vọng bài viết đã đem đến cho bạn những thông tin hữu ích, hãy tiếp tục theo dõi aetc.edu.vn để cập nhật những công nghệ mới nhất cùng chúng tôi mỗi ngày.