Local Storage là gì? Kiến thức cần biết về Local Storage

01/10/2023

Khái niệm Local Storage là gì đang trở nên ngày càng phổ biến trong các Website HTML5. Nhìn chung, đây là kỹ thuật Client Caching khá thú vị, cho phép doanh nghiệp có thể lưu trữ dễ dàng mà không cần đến sự trợ giúp của máy chủ. Trong bài viết này, hãy cùng CMC Cloud tìm hiểu kỹ hơn về Local Storage, ưu điểm cũng như cách phân biệt giữa Local Storage và Session Storage.

Local Storage là gì

Local Storage là một loại lưu trữ dữ liệu trực tiếp ngay trên trình duyệt của người dùng thông qua phần mềm được tích hợp sẵn. Các dữ liệu này được lưu theo cặp key-value. Chúng ta có thể lưu trữ và truy vấn vào các dữ liệu đó vô thời hạn, với khối lượng lưu trữ lên đến khoảng 5MB (chỉ khoảng 4MB với bộ nhớ cookies).

Thời gian để truy cập vào dữ liệu trong Local Storage là vô thời hạn. Tuy nhiên, chúng ta có thể lựa chọn xóa các dữ liệu đó thông qua lệnh Clear.

Local Storage là gì?

Ưu điểm của Local Storage

Với Local Storage, chúng ta có thể tạo ra một Web Page độc lập trên chính trình duyệt của người dùng.
Cung cấp dung lượng lưu trữ lên đến 5MB cho đa số các trình duyệt hiện nay, mang lại lợi ích cao hơn nhiều so với cookie.
Có thể dùng để lưu trữ các thông tin dữ liệu không nhạy cảm.
Dữ liệu lưu trên Local Storage không bao giờ hết hạn, và chúng cũng không bị mất ngay cả khi đóng trình duyệt.
Chỉ với một dòng lệnh clear() đơn giản, chúng ta có thể xóa hết tất cả các dữ liệu trong Local Storage.

Hạn chế của Local Storage

Không thể lưu trữ các tập tin phức tạp. Local Storage chỉ hỗ trợ lưu trữ ở dạng string là tối đa.
Không phù hợp khi sử dụng những trình duyệt, ứng dụng cần xử lý khối lượng lớn dữ liệu, vì Local Storage chỉ hỗ trợ tối đa 5MB.
Tính bảo mật kém, bất kỳ JavaScript nào cũng đều có thể truy cập vào Local Storage. Do đó, bạn không nên lưu trữ các thông tin nhạy cảm như id, tên người dùng hoặc mật khẩu.
Local Storage chỉ lưu trữ dữ liệu trên trình duyệt chứ không phải trên hệ thống cơ sở dữ liệu của máy chủ.
Local Storage có cách hoạt động đồng bộ, mỗi hoạt động sẽ được thực hiện lần lượt. Do đó, khi có nhiều yêu cầu cùng một lúc, Local Storage không thể hỗ trợ.

Cách hoạt động của Local Storage

Local Storage cung cấp 5 phương thức hoạt động để quản lý quá trình lưu trữ dữ liệu trên các ứng dụng Web:

setltem(key, value): Dùng để thêm cặp giá trị key-value vào trong Local Storage, trong đó key là tên Object dùng để truy cập, còn Value sẽ hỗ trợ lưu trữ giá trị dưới dạng một string. Sau khi khởi tạo, chúng ta có thể lưu trữ dữ liệu thông qua việc gán giá trị cho key. Dưới đây là ví dụ minh họa cách lưu giá trị tên người dùng (username) là Daniel:

Lưu giá trị tên người dùng

getltem(key): Hỗ trợ nhận vào khóa (key) và trả về giá trị tương ứng của Object đã được lưu trong Local Storage trên trình duyệt. Chúng ta có thể sử dụng getltem của đối tượng Local Storage cùng key tương ứng để lấy giá trị, như hình:

Lấy giá trị của khóa

removeItem(key): Xóa một giá trị trong Local Storage. Ví dụ, để xóa giá trị của key “username”, chúng ta thực hiện như sau:

Xóa giá trị của username

clear(): Xóa toàn bộ giá trị trong Local Storage, ví dụ như hình:

Xóa toàn bộ giá trị

key(index): Nhận tham số index và trả về tên khóa của Object có số index tương ứng đã được lưu trong Local Storage. Key (index) thường dùng để duyệt qua tất cả các Object có trong Local Storage.

Cách sử dụng key(index)

Các trình duyệt hỗ trợ Local Storage là gì

Hiện nay, Local Storage đã hỗ trợ trên nhiều trình duyệt phổ biến khác nhau, bao gồm:

Google Chrome
Firefox
Internet Explorer
Safari
Opera
Edge
WebView Android
Opera Android
Samsung Internet

Phân biệt Local Storage và Session Storage

Điểm nổi bật của Local Storage là chúng không thể xóa dữ liệu sau khi đóng trình duyệt. Do đó, HTML5 đã cho ra mắt Session Storage, cho phép chúng ta hủy dữ liệu sau mỗi phiên.

Nhìn chung, Session Storage giống hệt Local Storage nhưng chúng chỉ lưu trữ dữ liệu tại một phiên làm việc, cho phép người dùng sử dụng cho nhiều mục đích khác nhau.

Local Storage và Session Storage có gì khác nhau

Tóm lại, Local Storage là một tính năng thú vị của HTML5, cho phép chúng ta lưu dữ liệu trên trình duyệt dễ dàng hơn, phục vụ cho nhiều mục đích khác nhau của người dùng. Tuy nhiên, bạn không nên lạm dụng Local Storage để lưu những thông tin nhạy cảm. Hy vọng bài viết trên đã giải thích rõ khái niệm Local Storage là gì, cách hoạt động cho bạn. Hãy theo dõi các bài viết từ CMC Cloud để cập nhật liên tục các công nghệ mới nhất mỗi ngày.
CMC Cloud - Giải pháp Điện toán đám mây Toàn diện & Linh hoạt nhất. Cho phép tùy biến sử dụng và quản trị 25+ dịch vụ