Giới Thiệu Về Local Storage

Local Storage là một API (giao diện lập trình ứng dụng) mạnh mẽ trong 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 trên thiết bị của người dùng. Khác với session storage (lưu trữ phiên), dữ liệu trong Local Storage vẫn tồn tại ngay cả khi người dùng đóng trình duyệt, vì vậy nó rất hữu ích để lưu trữ tùy chọn cá nhân, cài đặt ứng dụng hoặc các loại dữ liệu mà bạn muốn giữ lại giữa các phiên duyệt web.

Tuy nhiên, cần lưu ý rằng dữ liệu được lưu trữ chỉ có thể truy cập từ cùng một trình duyệt. Ví dụ, nếu bạn đã lưu một số thông tin trong Chrome, bạn sẽ không tìm thấy chúng khi mở Firefox.

Để tìm hiểu sâu hơn về Local Storage, mời bạn tham khảo bài viết chi tiết: Local Storage Là Gì? Những Điều Cần Lưu Ý Khi Sử Dụng.

Local Storage Hoạt Động Như Thế Nào?

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

Ví Dụ Về Chuyển Đổi Đối Tượng Sang JSON

const user = {
  name: "AliceDoe"
};
const userToJSON = JSON.stringify(user); // Chuyển đổi đối tượng thành JSON

Cách Xem Dữ Liệu Local Storage Trong Trình Duyệt

Bạn có thể dễ dàng xem và tương tác với dữ liệu lưu trữ trong Local Storage thông qua Công Cụ Dành Cho Nhà Phát Triển. Dưới đây là hướng dẫn nhanh để thực hiện điều này:

1. Nhấp chuột phải vào bất kỳ trang web nào và chọn "Kiểm tra" hoặc nhấn phím F12.
2. Mở tab Application.
3. Tại bảng bên trái, tìm mục Local Storage trong phần lưu trữ.
4. Tại đây, bạn sẽ thấy dữ liệu đã lưu dưới dạng cặp Key - Value.

Cách Tạo Bản Ghi Mới Trong Local Storage

Để thêm dữ liệu vào Local Storage, bạn chỉ cần làm các bước sau:

const user = {
  name: "AliceDoe"
};

const userToJSON = JSON.stringify(user); // Chuyển đổi thành JSON
localStorage.setItem("user", userToJSON); // Lưu dữ liệu

Trong ví dụ này:

• Key là "user".
• Value là đối tượng đã được chuyển đổi thành JSON.

Cách Đọc Dữ Liệu Từ Local Storage

Khi bạn cầ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"); // Lấy dữ liệu
const userObject = JSON.parse(userJSON); // Chuyển đổi lại thành đối tượng JS
console.log(userObject); // { name: "AliceDoe" }

Cách Cập Nhật Dữ Liệu Trong Local Storage

Việc cập nhật một bản ghi đã tồn tại cũng tương tự như khi tạo một bản ghi mới. Bạn chỉ cần ghi đè lên dữ liệu cũ:

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

const updatedUserJSON = JSON.stringify(updatedUser);
localStorage.setItem("user", updatedUserJSON); // Ghi đè bản ghi

Cách Xóa Dữ Liệu Trong Local Storage

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

localStorage.removeItem("user"); // Xóa bản ghi "user"

Hành động này sẽ xóa dữ liệu liên kết với khóa "user".

Kết Luận

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

Tích hợp Local Storage vào ứng dụng của bạn có thể nâng cao chức năng mà không cần phải dựa vào giải pháp phụ trợ phức tạp cho nhiều tác vụ cụ thể. Cảm ơn bạn đã theo dõi bài viết!
source: viblo