Wyświetlanie i edytowanie pamięci lokalnej

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Z tego przewodnika dowiesz się, jak za pomocą Narzędzi deweloperskich w Chrome wyświetlać, edytować i usuwać pary klucz-wartość localStorage. Pamięć lokalna zapisuje dane z różnych sesji przeglądarki.

Wyświetlanie kluczy i wartości localStorage

  1. Otwórz Narzędzia deweloperskie na stronie, którą chcesz sprawdzić.

  2. Kliknij Aplikacja > Pamięć i rozwiń Pamięć lokalna. Kliknij domenę, aby wyświetlić pary klucz-wartość.

    Pary klucz-wartość z youtube.com.

  3. Aby wyświetlić podgląd wartości pod tabelą, wybierz parę.

    Wyświetlanie wartości wybranego klucza.

Aby ręcznie odświeżyć pary klucz-wartość, na pasku działań u góry kliknij Odśwież. Odśwież.

Filtrowanie par klucz-wartość

Aby szybko znaleźć parę klucz-wartość, wpisz w polu filtra u góry tekstu ciąg znaków zawierający klucz lub wartość.

odfiltrowuje pary klucz-wartość, które nie zawierają ciągu „has”.

Tworzenie nowej pary klucz-wartość localStorage

  1. Wyświetl pary klucz-wartość domeny localStorage. Na przykład na tej stronie demonstracyjnej.
  2. Kliknij dwukrotnie pustą część tabeli. Narzędzia dla programistów tworzą nowy wiersz i skupiają kursor na kolumnie Klucz.
  3. Wpisz nową parę klucz-wartość.

Edytowanie kluczy lub wartości localStorage

  1. Wyświetl pary klucz-wartość typu localStorage z domeny. Na przykład na tej stronie demonstracyjnej.
  2. Aby edytować klucz lub wartość, kliknij dwukrotnie komórkę w kolumnie Klucz lub Wartość.
  3. Aby zastosować zmiany, odśwież stronę.

Usuń pary klucz-wartość (localStorage)

  1. Wyświetl pary klucz-wartość localStorage domeny. Na przykład na tej stronie demonstracyjnej.
  2. Kliknij parę klucz-wartość, aby ją wybrać.
  3. Aby usunąć wybraną parę, na pasku działań u góry kliknij Usuń. Usuń.Usuwam wybraną parę klucz-wartość.
  4. Możesz też kliknąć Wyczyść wszystko. Wyczyść wszystko, aby usunąć wszystkie pary.

Wejdź w interakcję z użytkownikiem localStorage z poziomu konsoli

Ponieważ w Konsoli możesz uruchamiać kod JavaScript, a Konsola ma dostęp do kontekstów JavaScriptu na stronie, możesz wchodzić w interakcje z elementem localStorage w Konsoli.

  1. W narzędziach DevTools otwórz konsolę.
  2. Jeśli chcesz uzyskać dostęp do par klucz-wartość localStorage w domenie innej niż ta, na której się znajdujesz, wybierz odpowiedni kontekst JavaScriptu w menu kontekstowym u góry paska działań.
  3. Wyrażenia localStorage możesz uruchamiać w konsoli tak samo jak w JavaScript.

Interakcja z `localStorage` w konsoli