Wprowadzenie
Tworząc lekkie aplikacje – możemy chcieć przechowywać pewne dane. Jeśli baza danych jest przesadzona – jest świetna alternatywa: localStorage!
Chociaż nie zastępuje bazy danych do celów związanych z bazą danych, służy jako prosty system pamięci masowej oparty na plikach, który można wykorzystać do przechowywania łatwo dostępnych punktów danych.
W tym artykule dowiemy się, jak korzystać
localStoragedo łatwego przechowywania danych w naszej przeglądarce. Te dane są zapisywane jako pary klucz-wartość które użytkownik może łatwo pobrać.
Zapisywanie danych do localStorage w React jest bardzo proste:
const [data, setData] = useState([]);
useEffect(() => {
localStorage.setItem('dataKey', JSON.stringify(data));
}, [data]);
Jeśli nie spieszysz się i chcesz dowiedzieć się więcej o tym, jak to działa, czytaj dalej!
Co to jest Lokalny magazyn?
localStorage to obiekt do przechowywania w sieci, który umożliwia programistom przechowywanie pary klucz-wartość w przeglądarce internetowej i zapewnia, że te dane przetrwają wszystkie odświeżenia strony, nawet gdy użytkownik zamknie lub ponownie uruchomi przeglądarkę – i nie ma daty ważności. Przechowywane pary klucz-wartość mogą zawierać dane dowolnego typu – tablice, obiekty, ciągi, liczby i wiele innych.
Nie może to jednak zastąpić roli baz danych w witrynach i aplikacjach internetowych, ponieważ dane są tracone, gdy użytkownik czyści pamięć podręczną przeglądarki i pamięć lokalną – ostatecznie Lokalny magazyn i jako takie powinny być używane. Niemniej jednak zdarzają się sytuacje, w których użytkownik może skorzystać localStorage, takich jak wdrożenie tryb ciemny funkcja, utrwalanie wartości wejściowych formularza użytkownika i wiele innych.
localStorage ma wbudowane metody, które umożliwiają nam dostęp do obiektu przechowywania przeglądarki. Jednym z przykładów jest setItem() metoda, która pozwala nam dodać klucz i wartość do localStorage, dzięki czemu możemy przechowywać dane. Do pobierania danych wykorzystywane są inne metody – getItem(), Usunąć dane - removeItem(), Wyczyść wszystko localStorage instancje - clear()I tak dalej.
Przechowywanie danych do Lokalny magazyn Z ustaw element() Metoda wykonania
Połączenia setItem() metoda pozwala nam zapisać wartości dowolnego typu danych do localStorage przez przypisanie wartości do kluczy, w wyniku czego a para klucz-wartość. Ten klucz byłby używany do pobierania odpowiedniej wartości, gdy tylko chcemy ją pobrać localStorage.
Uwaga: W celu przechowywania danych w localStorage, musimy go najpierw przekonwertować na ciąg JSON używając JSON.stringify() funkcjonować. A kiedy będziemy chcieli go odzyskać, przeanalizujemy dane za pomocą JSON.parse(), konwertując ciąg JSON z powrotem na a Obiekt JSON.
Podczas pracy z danymi w React często korzystamy haczyki aby pomóc nam go przechowywać/przechowywać. Hooki mogą również pomóc nam znaleźć miejsce, w którym można przesłać te dane. Dotyczy to również localStorage ponieważ użyjemy useState() i useEffect() haki. Te haczyki są krytyczne, ponieważ useState() hak służy do przechowywania i ustawiania danych, natomiast useEffect() hook jest domyślnie wywoływany po pierwszym renderowaniu i za każdym razem, gdy stan przeszedł jako drugi parametr.
Po wyjaśnieniu podstaw, oto kod, którego użyjemy do przechowywania danych w localStorage:
const [data, setData] = useState([]);
useEffect(() => {
localStorage.setItem('dataKey', JSON.stringify(data));
}, [data]);
Najpierw stworzyliśmy stan do przechowywania danych, które chcemy przechowywać w naszym localStorage, a następnie stworzyliśmy useEffect() hook, przekazując stan jako drugi parametr. Dzięki temu za każdym razem, gdy stan się zmieni, dane w localStorage zostanie zaktualizowany do bieżącej wartości.
Zajmowaliśmy się podstawową funkcjonalnością, która służy nam do pomocy w przechowywaniu danych, w ramach useEffect() hak:
localStorage.setItem('dataKey', JSON.stringify(data));
Wnioski
W tym artykule dowiedzieliśmy się, jak używać haków React do przechowywania danych w React za pomocą localStorage. Jak wspomniano wcześniej, nigdy nie zastąpi to roli bazy danych, ale raczej pomoże nam w przechowywaniu niektórych danych związanych z użytkownikiem, które mogą ulepszyć interfejs użytkownika, ale nie mają być utrwalane niezależnie od przeglądarki.
