Hiện nay, Local Storage là một trong những tính năng mạnh mẽ nhất của HTML5, cho phép bạn lưu trữ mà không cần sự hỗ trợ của máy chủ. Trong bài viết này, chúng ta sẽ tìm hiểu về Local Storage, cách hoạt động và những lưu ý quan trọng để sử dụng Local Storage một cách an toàn.

1. Local Storage là gì?

Local Storage là một loại lưu trữ dữ liệu cục bộ trong trình duyệt web, nó cho phép các trang web và ứng dụng JavaScript lưu trữ truy xuất dữ liệu mà không phải lo lắng về việc mất dữ liệu. Do đó, dữ liệu được lưu trong trình duyệt sẽ vẫn có thể truy cập được ngay cả khi đóng cửa sổ.

Local Storage thường được sử dụng để lưu trữ các thông tin người dùng như tên đăng nhập, mật khẩu, các thiết lập cá nhân,... Bên cạnh chức năng mã hóa dữ liệu, thì Local Storage không phải là một công cụ bảo mật hoàn hảo. Dữ liệu có thể bị xóa bởi người dùng hoặc các công cụ quản lý dữ liệu trình duyệt. Nó cũng có một giới hạn dung lượng lưu trữ tối đa 5MB cho mỗi trang web.

>>> Xem thêm bài viết:

- Alert manager: Cấu hình cảnh báo bằng Prometheus cho hệ thống K8s

- Monitoring trên K8s cluster với Prometheus và Grafana

- Hướng dẫn cài đặt Web server Apache trên CentOS 7

2. Ưu và nhược điểm của Local Storage

Ưu điểm của Local Storage:

  • Lưu trữ dữ liệu trong thời gian dài: Dữ liệu được lưu trữ trong Local Storage sẽ tồn tại mãi mãi, cho dù người dùng đóng trình duyệt hoặc tắt máy tính
  • Dữ liệu trong Local Storage được bảo mật chỉ có thể truy cập bởi trang web mà đã lưu trữ dữ liệu đó
  • Không cần gửi dữ liệu tới máy chủ khi chúng đã được lưu trữ trên máy tính của người dùng, nên bạn khi bạn sử dụng Local Storage sẽ không cần phải gửi dữ liệu đi.

Nhược điểm của Local Storage:

  • Dung lượng lưu trữ hạn chế, thường chỉ khoảng 5MB cho mỗi trang web
  • Dữ liệu có thể bị xóa bởi người dùng hoặc một số công cụ quản lý dữ liệu trình duyệt
  • Các trình duyệt có thể hạn chế hoặc chặn sử dụng Local Storage vì lý do bảo mật hoặc vấn đề về quản lý bộ nhớ

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

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

setltem(key, value): Đây là phương để 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.

Sau khi đã được khởi tạo, bạn có thể lưu trữ dữ liệu trong Local Storage bằng cách gán giá trị cho một khóa. Ví dụ, để lưu trữ một giá trị “username” là “Daniel”, bạn có thể sử dụng cách sau:

getltem(key): Phương thức này nhận vào key và trả về value tương ứng của object đã lưu trong Local Storage của browser. Bạn có thể sử dụng “getItem” của đối tượng “Local Storage” với khóa tương ứng. Để lấy giá trị của khóa “username” như hình dưới đây:

removeItem(key): Để xóa một giá trị trong Local Storage, bạn có thể sử dụng phương thức “removeItem” của đối tượng “localStorage” với khóa tương ứng. Ví dụ cụ thể để xóa giá trị của khóa “username”, bạn có thể sử dụng cách sau

clear(): Nếu bạn muốn xóa tất cả các giá trị trong Local Storage, bạn có thể sử dụng phương thức “clear” của đối tượng “localStorage” như sau:

key(index): Phương thức 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.

>>> Xem thêm bài viết:

- Hướng dẫn cài đặt Web server Apache trên CentOS 7

- Cài đặt cấu hình cân bằng tải với HaProxy và Docker

- Tìm hiểu về ràng buộc (Constraint) trong SQL

4. Những trình duyệt hỗ trợ Local Storage

Bên cạnh những cách thức hoạt động để quản lý việc lưu trữ, Local Storage còn được hỗ trợ bởi một số trình duyệt. Các trình duyệt này đều cung cấp hỗ trợ cho Local Storage trong HTML5, cho phép lưu trữ dữ liệu cục bộ của website mà không cần sự hỗ trợ từ máy chủ:

Tuy nhiên, phiên bản cụ thể hỗ trợ có thể phụ thuộc vào các trình duyệt và các tính năng mới của các phiên bản mới.

5. Lưu ý khi sử dụng Local Storage

Có một số lưu ý quan trọng khi sử dụng Local Storage:

  • Kích thước giới hạn 5MB: mỗi trình duyệt web có một giới hạn về kích thước tối đa của dữ liệu có thể lưu trữ trong Local Storage. Các giá trị mới sẽ không được lưu trữ khi đã đạt đến giới hạn tối đa.
  • Khi bạn xóa dữ liệu trong Local Storage, nó sẽ không thể được phục hồi
  • Tốc độ chậm hơn so với các công cụ lưu trữ dữ liệu khác, như chậm hơn trong việc đọc và ghi dữ liệu
  • Không nên lưu trữ thông tin nhạy cảm hoặc bảo mật trong Local Storage: Dữ liệu có thể được truy cập và sửa đổi bởi mọi trang web truy cập đến máy tính của người dùng.
  • Cẩn thận để tránh ghi đè dữ liệu cũ hoặc gây ra lỗi trong ứng dụng khi sửa đổi
  • Kiểm soát số lượng dữ liệu được lưu trữ trong Local Storage và xóa những giá trị không cần thiết để tránh tình trạng quá tải.

Tạm kết

Vậy là chúng ta đã cùng tìm hiểu về Local Storage trong lập trình web, từ những khái niệm cơ bản tới cách hoạt động. Đây là công cụ hữu ích giúp giữ lại dữ liệu trên trình duyệt web mà không phải sử dụng cookie hoặc server, giúp cho các trang web hoạt động mượt mà và cung cấp trải nghiệm tốt hơn cho người dùng. Hi vọng bài viết sẽ đem đến cho bạn những thông tin hữu ích. Hãy theo dõi Stringee để cập nhật những thông tin công nghệ mới nhất mỗi ngày.

Stringee Communication APIs là giải pháp cung cấp các tính năng giao tiếp như gọi thoại, gọi video, tin nhắn chat, SMS hay tổng đài CSKH cho phép tích hợp trực tiếp vào ứng dụng/website của doanh nghiệp nhanh chóng. Nhờ đó giúp tiết kiệm đến 80% thời gian và chi phí cho doanh nghiệp bởi thông thường nếu tự phát triển các tính năng này có thể mất từ 1 - 3 năm.

Bộ API giao tiếp của Stringee hiện đang được tin dùng bởi các doanh nghiệp ở mọi quy mô, lĩnh vực ngành nghề như TPBank, VOVBacsi24, VNDirect, Shinhan Finance, Ahamove, Logivan, Homedy,  Adavigo, bTaskee…

Quý bạn đọc quan tâm xin mời đăng ký NHẬN TƯ VẤN TẠI ĐÂY: