Local storage là gì? Những lưu ý khi sử dụng Local storage

Bizfly Cloud

1206

11-08-2022

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, Bizfly Cloud 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.

Ưu, nhược điểm của local Storage là gì?

localStorage là một tính năng thú vị của HTML5, tuy nhiên cũng có vài lưu ý khi sử dụng. Để có cái nhìn tổng quan hơn về localStorage, hãy điểm qua một số ưu điểm và nhược điểm của nó ngay dưới đây:

Ưu điểm của local Storage

• Dữ liệu do localStorage thu thập được lưu trữ trong trình duyệt với giới hạn lưu trữ 5MB, cao hơn cookie (4MB)
• Dữ liệu được lưu trữ bởi localStorage không có ngày hết hạn
• Với một dòng code duy nhất clear (), bạn có thể xóa tất cả các mục localStorage nhanh chóng
• Dữ liệu localStorage vẫn tồn tại lâu kể cả khi đóng cửa sổ trình duyệt, chẳng hạn như các mặt hàng trong giỏ hàng
• localStorage cũng có lợi thế hơn cookie ở chỗ nó có thể lưu trữ nhiều dữ liệu hơn

Hạn chế của local Storage

• localStorage không nên sử dụng để lưu trữ thông tin nhạy cảm như tên người dùng và mật khẩu
• localStorage không bảo mật dữ liệu và nó có thể được truy cập bằng bất kỳ mã nào, vì vậy, localStorage không an toàn.
• Sử dụng localStorage, bạn chỉ có thể lưu trữ tối đa 5MB dữ liệu trên trình duyệt
• localStorage chỉ lưu trữ dữ liệu trong trình duyệt, không phải trong cơ sở dữ liệu dựa trên máy chủ
• localStorage hoạt động đồng bộ, mỗi hoạt động trong localStorage thực hiện lần lượt, do đó không thể đáp ứng đồng thời các yêu cầu dữ liệu.

Những trình duyệt hỗ trợ local Storage

Local Storage được hỗ trợ bởi một số trình duyệt. Dưới đây là danh sách các trình duyệt và các phiên bản hỗ trợ JavaScript localStorage:

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 Bizfly Cloud để cập nhật những công nghệ mới nhất cùng chúng tôi mỗi ngày.

>> Có thể bạn quan tâm: 8 thư viện JavaScript để xử lý Local Storage (lưu trữ cục bộ) tốt hơn