Bật mí các kỹ thuật ít người biết về Local Storage trong JavaScript

Local Storage là một API (giao diện lập trình ứng dụng) dựa trên trình duyệt, cho phép các nhà phát triển lưu trữ, truy xuất và quản lý dữ liệu trực tiếp trong trình duyệt. Không giống như session storage (lưu trữ phiên), Local Storage tồn tại ngay cả sau khi trình duyệt bị đóng, làm cho nó trở nên lý tưởng để lưu trữ các tùy chọn người dùng, cài đặt ứng dụng hoặc bất kỳ loại dữ liệu nào cần được giữ lại giữa các phiên. Tuy nhiên, điều quan trọng cần lưu ý là dữ liệu bị giới hạn trong trình duyệt mà nó được lưu trữ. Ví dụ: dữ liệu được lưu trong Chrome sẽ không có sẵn trong Firefox.

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

Trước khi làm việc với Local Storage, điều quan trọng là bạn phải hiểu rằng nó lưu trữ dữ liệu ở định dạng JSON . Điều này có nghĩa là nếu bạn đang lưu một đối tượng JavaScript, trước tiên bạn sẽ cần chuyển đổi nó thành JSON và chuyển đổi nó trở lại thành đối tượng JavaScript khi truy xuất dữ liệu.

Sau đây là một ví dụ:

const user = {
  name: "AliceDoe"
};
const userToJSON = JSON.stringify(user); // Convert object to JSON

Hướng dẫn cách xem Local Storage trong trình duyệt của bạn

Bạn có thể xem và tương tác với dữ liệu được lưu trữ trong Local Storage bằng Công cụ dành cho nhà phát triển của trình duyệt . Sau đây là hướng dẫn nhanh:

Nhấp chuột phải vào bất kỳ trang web nào và chọn "Kiểm tra" (Inspect) hoặc nhấn F12.
Mở tab Application.
Ở bảng bên trái hiện ra, hãy tìm Local Storage trong phần lưu trữ và bạn sẽ thấy dữ liệu đã lưu trữ của mình được hiển thị dưới dạng cặp Key - Value.

Cách tạo một bản ghi mới trong Local Storage

Để lưu trữ dữ liệu trong Local Storage, hãy làm theo các bước sau:

const user = {
  name: "AliceDoe"
};

const userToJSON = JSON.stringify(user); // Convert to JSON
localStorage.setItem("user", userToJSON); // Save the item

Trong ví dụ này:

Key chính là "user".
Value chính là đối tượng được chuỗi hóa theo định dạng JSON.

Cách đọc dữ liệu từ Local Storage

Khi bạn truy xuất dữ liệu từ Local Storage, bạn sẽ cần chuyển đổi chuỗi JSON trở lại thành đối tượng JavaScript:

const userJSON = localStorage.getItem("user"); // Retrieve data
const userObject = JSON.parse(userJSON); // Convert back to JS object
console.log(userObject); // { name: "AliceDoe" }

Cập nhật dữ liệu hiện có trong Local Storage

Việc cập nhật dữ liệu trong Local Storage cũng tương tự như việc tạo bản ghi mới, về cơ bản thì bạn chỉ cần ghi đè lên dữ liệu cũ là được:

const updatedUser = {
  name: "AliceDoe",
  age: 25
};

const updatedUserJSON = JSON.stringify(updatedUser);
localStorage.setItem("user", updatedUserJSON); // Overwrite the record

Cách xóa dữ liệu ra khỏi Local Storage

Cuối cùng, để xóa một bản ghi khỏi Bộ nhớ cục bộ, bạn có thể sử dụng phương pháp removeItem:

localStorage.removeItem("user"); // Remove the "user" record

Thao tác này sẽ xóa bản ghi được liên kết với khóa "user".

Phần kết luận

Local Storage là một công cụ mạnh mẽ, dễ sử dụng để duy trì dữ liệu phía máy khách trong JavaScript. Bằng cách hiểu cách tạo, đọc, cập nhật và xóa bản ghi, bạn có thể lưu trữ dữ liệu quan trọng tồn tại trong các phiên trình duyệt, nâng cao trải nghiệm của người dùng. Tuy nhiên, điều quan trọng mà bạn cần nhớ rằng đó là Local Storage bị giới hạn ở một trình duyệt và miền cụ thể, do đó mà bạn không nên sử dụng cho dữ liệu nhạy cảm vì nó không được mã hóa.

Bằng cách tích hợp Local Storage vào các ứng dụng, bạn có thể cải thiện chức năng của chúng mà không cần giải pháp phụ trợ đầy đủ cho một số tác vụ nhất định. Cảm ơn các bạn đã theo dõi bài viết.