Giới thiệu

Khi phát triển các ứng dụng nhẹ - chúng tôi có thể muốn lưu trữ một số dữ liệu. Nếu cơ sở dữ liệu quá mức cần thiết - có một giải pháp thay thế tuyệt vời: localStorage!

Mặc dù nó không thay thế cơ sở dữ liệu cho các mục đích cơ sở dữ liệu, nhưng nó hoạt động như một hệ thống lưu trữ dựa trên tệp đơn giản mà bạn có thể tận dụng để lưu trữ các điểm dữ liệu dễ truy cập.

Trong bài viết này, chúng ta sẽ học cách sử dụng localStorage để dễ dàng lưu trữ dữ liệu trong trình duyệt của chúng tôi. Dữ liệu này được lưu dưới dạng cặp khóa-giá trị mà người dùng có thể dễ dàng truy xuất.

Đang lưu dữ liệu vào localStorage trong React rất dễ dàng:

const [data, setData] = useState([]);

useEffect(() => {
  localStorage.setItem('dataKey', JSON.stringify(data));
}, [data]);

Nếu bạn không vội và muốn tìm hiểu thêm về cách hoạt động của nó, hãy tiếp tục đọc!

Là gì lưu trữ cục bộ?

localStorage là một đối tượng lưu trữ web cho phép các nhà phát triển lưu trữ cặp khóa-giá trị trong trình duyệt web và đảm bảo rằng dữ liệu này tồn tại sau tất cả các lần làm mới trang, ngay cả khi người dùng đóng hoặc khởi động lại trình duyệt - và nó không có ngày hết hạn. Các cặp khóa-giá trị được lưu trữ có thể bao gồm bất kỳ loại dữ liệu nào - mảng, đối tượng, chuỗi, số và nhiều loại khác.

Tuy nhiên, điều này không thể thay thế vai trò của cơ sở dữ liệu trong các trang web và ứng dụng web của bạn vì dữ liệu bị mất khi người dùng xóa bộ nhớ cache và bộ nhớ cục bộ của trình duyệt - cuối cùng, đó là lưu trữ cục bộ và nên được sử dụng như vậy. Tuy nhiên, có những tình huống mà người dùng có thể sử dụng localStorage, chẳng hạn như triển khai chế độ tối , duy trì giá trị đầu vào biểu mẫu của người dùng và nhiều giá trị khác.

localStorage có các phương thức tích hợp cho phép chúng ta truy cập vào đối tượng lưu trữ của trình duyệt. Một ví dụ là setItem() , cho phép chúng tôi thêm khóa và giá trị vào localStorage, do đó cho phép chúng tôi lưu trữ dữ liệu. Các phương pháp khác được sử dụng để truy xuất dữ liệu - getItem(), xóa dữ liệu - removeItem(), quet sạch tât cả localStorage các trường hợp - clear(), Và như vậy.

Lưu trữ dữ liệu vào lưu trữ cục bộ Với thiết lập các mục() Phương pháp

Sản phẩm setItem() cho phép chúng tôi lưu các giá trị của bất kỳ kiểu dữ liệu nào vào localStorage bằng cách gán giá trị cho các khóa, dẫn đến cặp khóa-giá trị. Khóa này sẽ được sử dụng để truy xuất giá trị tương ứng bất cứ khi nào chúng ta muốn truy xuất nó từ localStorage.

Lưu ý: Để lưu trữ dữ liệu trong localStorage, trước tiên chúng ta phải chuyển đổi nó thành Chuỗi JSON bằng cách sử dụng JSON.stringify() hàm số. Và khi chúng tôi muốn truy xuất nó, chúng tôi sẽ phân tích cú pháp dữ liệu bằng cách sử dụng JSON.parse(), chuyển đổi chuỗi JSON trở lại thành Đối tượng JSON.

Khi làm việc với dữ liệu trong React, chúng tôi thường sử dụng móc để giúp chúng tôi lưu trữ / giữ nó. Hooks cũng có thể giúp chúng tôi tìm nơi tải dữ liệu đó lên. Điều này cũng áp dụng cho localStorage bởi vì chúng tôi sẽ sử dụng useState() và useEffect() móc câu. Những móc này rất quan trọng vì useState() hook được sử dụng để giữ và thiết lập dữ liệu, trong khi useEffect() hook được kích hoạt theo mặc định sau lần hiển thị đầu tiên và bất cứ khi nào trạng thái được truyền khi tham số thứ hai thay đổi.

Sau khi giải thích nền tảng, đây là mã chúng tôi sẽ sử dụng để lưu trữ dữ liệu trong localStorage:

const [data, setData] = useState([]);

useEffect(() => {
  localStorage.setItem('dataKey', JSON.stringify(data));
}, [data]);

Đầu tiên, chúng tôi đã tạo một trạng thái để giữ dữ liệu chúng tôi muốn lưu trữ trong localStoragevà sau đó chúng tôi đã tạo useEffect() hook, chuyển trạng thái làm tham số thứ hai. Bằng cách đó, bất cứ khi nào trạng thái thay đổi, dữ liệu trong localStorage được cập nhật thành giá trị hiện tại.

Chúng tôi đã xử lý chức năng cốt lõi, được sử dụng để hỗ trợ chúng tôi trong việc lưu trữ dữ liệu, trong useEffect() móc:

localStorage.setItem('dataKey', JSON.stringify(data));

Kết luận

Trong bài viết này, chúng ta đã học cách sử dụng React hooks để lưu trữ dữ liệu trong React bằng cách sử dụng localStorage. Như đã nói trước đây, điều này sẽ không bao giờ thay thế vai trò của cơ sở dữ liệu, mà sẽ hỗ trợ chúng tôi lưu trữ một số dữ liệu liên quan đến người dùng có thể cải thiện giao diện người dùng nhưng không có nghĩa là tồn tại độc lập với trình duyệt.