Cách làm việc với local storage và session storage trong JavaScript

Local Storage và Session Storage là hai phương thức trong JavaScript cho phép lưu trữ dữ liệu trực tiếp trên trình duyệt của người dùng. Trong bài viết này, chúng ta sẽ tìm hiểu cách làm việc với Local Storage và Session Storage trong JavaScript.

Local Storage

Local Storage cho phép lưu trữ dữ liệu trên trình duyệt và nó sẽ được duy trì ngay cả khi trình duyệt đóng và mở lại. Điều này cho phép chúng ta lưu trữ thông tin như cài đặt ngôn ngữ, dữ liệu người dùng, thông tin phiên làm việc và các tùy chọn người dùng.

Lưu trữ dữ liệu vào Local Storage

Để lưu trữ dữ liệu vào Local Storage, chúng ta sử dụng phương thức setItem(key, value).

Ví dụ: localStorage.setItem('name', 'John');

Trong ví dụ trên, chúng ta lưu trữ giá trị “John” vào Local Storage với khóa (key) là “name”.

Truy xuất dữ liệu từ Local Storage

Để truy xuất dữ liệu từ Local Storage, chúng ta sử dụng phương thức getItem(key).

Ví dụ: const name = localStorage.getItem('name');
console.log(name); // Kết quả: John

Trong ví dụ trên, chúng ta truy xuất giá trị từ Local Storage với khóa “name” và lưu vào biến name.

Xóa dữ liệu từ Local Storage

Để xóa dữ liệu từ Local Storage, chúng ta sử dụng phương thức removeItem(key).

Ví dụ: localStorage.removeItem('name');

Trong ví dụ trên, chúng ta xóa dữ liệu có khóa “name” từ Local Storage.

The latest on everything AppSignal | AppSignal Blog

Session Storage

Session Storage cũng cho phép lưu trữ dữ liệu trên trình duyệt, nhưng dữ liệu chỉ tồn tại trong phiên làm việc hiện tại. Khi trình duyệt đóng, dữ liệu sẽ bị xóa.

Lưu trữ dữ liệu vào Session Storage

Để lưu trữ dữ liệu vào Session Storage, chúng ta sử dụng phương thức setItem(key, value).

Ví dụ: sessionStorage.setItem('language', 'English');

Trong ví dụ trên, chúng ta lưu trữ giá trị “English” vào Session Storage với khóa “language”.

Truy xuất dữ liệu từ Session Storage

Để truy xuất dữ liệu từ Session Storage, chúng ta sử dụng phương thức getItem(key).

Ví dụ: const language = sessionStorage.getItem('language');
console.log(language); // Kết quả: English

Trong ví dụ trên, chúng ta truy xuất giá trị từ Session Storage với khóa “language” và lưu vào biến language.

Xóa dữ liệu từ Session Storage

Để xóa dữ liệu từ Session Storage, chúng ta sử dụng phương thức removeItem(key).

Ví dụ: sessionStorage.removeItem('language');

Trong ví dụ trên, chúng ta xóa dữ liệu có khóa “language” từ Session Storage.

Lưu trữ đối tượng JSON

Cả Local Storage và Session Storage chỉ hỗ trợ lưu trữ dữ liệu dạng chuỗi. Tuy nhiên, chúng ta có thể lưu trữ đối tượng JSON bằng cách chuyển đổi đối tượng thành chuỗi JSON sử dụng JSON.stringify() và sau đó chuyển đổi chuỗi JSON thành đối tượng sử dụng JSON.parse().

Dưới đây là một ví dụ:

const user = {
name: 'John',
age: 30,
email: '[email protected]'
};

localStorage.setItem('user', JSON.stringify(user));

const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser.name); // Kết quả: John

 

Trong ví dụ trên, chúng ta chuyển đổi đối tượng user thành chuỗi JSON và lưu vào Local Storage. Sau đó, chúng ta lấy chuỗi JSON từ Local Storage và chuyển đổi nó thành đối tượng để truy cập các thuộc tính của đối tượng.

21 Useful JavaScript Tips That'll Help You Save Time

Local Storage và Session Storage cho phép chúng ta lưu trữ dữ liệu trên trình duyệt của người dùng. Với Local Storage, dữ liệu sẽ được lưu trữ vĩnh viễn, trong khi với Session Storage, dữ liệu chỉ tồn tại trong phiên làm việc hiện tại. Chúng ta có thể sử dụng các phương thức như setItem(), getItem() và removeItem() để làm việc với Local Storage và Session Storage. Đồng thời, chúng ta cũng có thể lưu trữ và truy xuất các đối tượng JSON bằng cách chuyển đổi chúng thành chuỗi JSON.

Tags:
Related Posts