Khái niệm

Local storage là một API trong HTML5 cho phép các ứng dụng web lưu trữ dữ liệu trong trình duyệt của người dùng.

Dữ liệu được lưu trữ trong local storage sẽ không bị xóa khi người dùng đóng trình duyệt web. Điều này giúp cho việc lưu trữ thông tin cục bộ trở nên đơn giản và tiện lợi.

Local storage có một số ưu điểm quan trọng khi sử dụng trong ứng dụng web:

• Dữ liệu không bị xóa: Dữ liệu được lưu trữ trong local storage sẽ tồn tại cho đến khi người dùng xóa nó hoặc xóa cache và lịch sử duyệt web.
• Dễ sử dụng: Các phương thức setItem(), getItem() và removeItem() rất dễ sử dụng và cho phép chúng ta lưu trữ và truy xuất thông tin một cách đơn giản.
• Tiết kiệm băng thông: Vì dữ liệu được lưu trữ trong local storage, không cần gửi yêu cầu đến máy chủ mỗi khi cần truy xuất thông tin.

Cách sử dụng

Để sử dụng local storage, chúng ta có thể sử dụng các phương thức setItem(), getItem() và removeItem().

Dưới đây là một ví dụ về cách sử dụng local storage để lưu trữ tên người dùng trong một ứng dụng web:

// Lưu tên người dùng vào local storage
localStorage.setItem('username', 'John Doe');

// Lấy tên người dùng từ local storage
const username = localStorage.getItem('username');
console.log(username); // Output: John Doe

// Xóa tên người dùng khỏi local storage
localStorage.removeItem('username');

Trong ví dụ trên, chúng ta sử dụng phương thức setItem() để lưu tên người dùng vào local storage với key là 'username' và giá trị là 'John Doe'. Sau đó, chúng ta sử dụng phương thức getItem() để lấy tên người dùng từ local storage và gán vào biến username. Cuối cùng, chúng ta sử dụng phương thức removeItem() để xóa tên người dùng khỏi local storage.