Local Storage là gì? Tại sao lại sử dụng?

Trong bài viết này, chúng ta sẽ tìm hiểu “Local Storage là gì? Tại sao lại sử dụng nó?” nhé!

Local Storage cho phép các lập trình viên lưu trữ và truy xuất dữ liệu trong trình duyệt. Dữ liệu được lưu trữ trong Local Storage sẽ không hết hạn. Điều này có nghĩa là dữ liệu sẽ vẫn tồn tại ngay cả khi tab hoặc cửa sổ trình duyệt bị đóng.

Điều kiện tiên quyết

Bạn phải có hiểu biết cơ bản về JavaScript trước khi tìm hiểu Local Storage là gì. Bạn cũng cần một trình soạn thảo mã và trình duyệt để thực hành dự án. Trong hướng dẫn này, mình sẽ sử dụng Visual Studio Code và Google Chrome.

Local Storage là gì?

Vậy Local Storage là gì? Local Storage là một dạng lưu trữ web lưu trữ dữ liệu trong một thời gian dài. Đây có thể là một ngày, một tuần hoặc thậm chí một năm. Điều này phụ thuộc vào sở thích của lập trình viên. Điều quan trọng cần lưu ý là Local Storage chỉ lưu trữ các chuỗi, vì vậy nếu bạn muốn lưu trữ các đối tượng, danh sách hoặc mảng, bạn phải chuyển đổi chúng thành một chuỗi bằng cách sử dụng JSON.stringify().

Khi nào sử dụng Local Storage?

Bạn chỉ nên sử dụng Local Storage khi lưu trữ thông tin không nhạy cảm. Điều này để đảm bảo rằng nếu một ai đó truy cập được vào máy tính của người dùng, họ sẽ không thể đánh cắp những dữ liệu quan trọng. Local Storage có thể giúp lưu trữ dữ liệu tạm thời trước khi nó được đẩy lên máy chủ. Điều quan trọng là phải xóa Local Storage sau khi hoạt động này hoàn tất.

Hạn chế

Những hạn chế chính của lưu trữ cục bộ là:

• Dữ liệu không an toàn
• Hoạt động đồng bộ
• Dung lượng lưu trữ hạn chế

Các phương thức chính trong Local Storage

Các phương thức chính khi sử dụng Local Storage là key(), setItem(), removeItem(), getItem() và clear().

key()

Phương thức này được sử dụng để lấy một giá trị/chuỗi từ một vị trí cụ thể. Chỉ mục có thể được truyền vào phương thức key() như một tham số.

var answer = localStorage.key(1);
// this statement will retrieve the value of the second item in localStorage.Code language: JavaScript (javascript)

key() cũng có thể được sử dụng trong một câu lệnh lặp để truy xuất tất cả các phần tử trong Local Storage.

setItem()

Phương thức này được sử dụng để lưu trữ các phần tử trong Local Storage. Dưới đây là một ví dụ:

window.localStorage.setItem("grade","One");
//in this case, the `grade` is the key while `One` is the value.Code language: JavaScript (javascript)

Như đã đề cập trước đây, chúng ta phải stringify các đối tượng trước khi lưu trữ chúng trong Local Storage.

const Car = {
  brand:"Suzuki",
  color:"white",
  price:10000
}

window.localStorage.setItem('car', JSON.stringify(Car));Code language: JavaScript (javascript)

Nếu thất bại, phương thức này sẽ trả về lỗi.

getItem()

Phương thức getItem() được sử dụng để truy cập hoặc truy xuất dữ liệu trong Local Storage. Phương thức này nhận một khóa key làm tham số. Sau đó, nó trích xuất giá trị cần thiết từ Local Storage.

Ví dụ, để truy xuất đối tượng Car ở trên, chúng ta sẽ sử dụng câu lệnh sau:

window.localStorage.getItem('car');
Code language: JavaScript (javascript)

Kết quả:

"{brand:"Suzuki",color:"white",price:"10000"}"
Code language: CSS (css)

Bạn nên chuyển đổi nó thành một đối tượng bằng cách sử dụng JSON.parse():

JSON.parse(window.localStorage.getItem('car'));Code language: JavaScript (javascript)

removeItem()

Phương thức này được sử dụng để xóa một phần tử khỏi Local Storage. Phương thức removeItem() yêu cầu một khóa key làm tham số.

window.localStorage.removeItem('brand');
Code language: JavaScript (javascript)

clear()

Phương thức này được sử dụng để xóa tất cả các giá trị được lưu trữ trong Local Storage. Nó không yêu cầu bất kỳ tham số nào.

window.localStorage.clear()
Code language: CSS (css)

Kết luận

Giờ bạn đã hiểu Local Storage là gì và làm quen với các phương thức khác nhau của Local Storage chưa? Các phương thức chính trong Local Storage là setItem(), getItem(), removeItem() và clear(). Cần có khóa khi lưu trữ, truy xuất và xóa các phần tử khỏi Local Storage. Nếu có gì thắc mắc, hỏi comment cho mình ở phần bình luận phía dưới để được giải đáp nhé!

Cảm ơn bạn đã theo dõi bài viết!

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.

---

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU

KHOÁ HỌC BOOTCAMP JAVA/PHP/.NET TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG