Lihat dan edit penyimpanan lokal

Sofia Emelianova
Sofia Emelianova

Panduan ini menunjukkan cara menggunakan Chrome DevTools untuk melihat, mengedit, dan menghapus pasangan nilai kunci localStorage. Penyimpanan lokal menyimpan data di seluruh sesi browser.

Melihat kunci dan nilai localStorage

  1. Buka DevTools di situs yang ingin Anda periksa.

  2. Buka Application > Storage dan luaskan Local Storage. Klik domain untuk melihat pasangan nilai kuncinya.

    Pasangan nilai kunci youtube.com.

  3. Untuk melihat pratinjau nilai di bawah tabel, pilih pasangan.

    Melihat nilai kunci yang dipilih.

Untuk memuat ulang pasangan nilai kunci secara manual, klik Refresh. Refresh di panel tindakan di bagian atas.

Memfilter pasangan nilai kunci

Untuk menemukan pasangan nilai kunci yang Anda perlukan dengan cepat, ketik string yang berisi kunci atau nilai ke kotak filter di bagian atas.

Memfilter key-value pair yang tidak berisi string 'has'.

Buat pasangan nilai kunci localStorage baru

  1. Lihat pasangan nilai kunci localStorage domain. Misalnya, di halaman demo ini.
  2. Klik dua kali bagian kosong pada tabel. DevTools akan membuat baris baru dan memfokuskan kursor Anda di kolom Kunci.
  3. Masukkan pasangan nilai kunci baru.

Mengedit kunci atau nilai localStorage

  1. Melihat pasangan nilai kunci localStorage domain. Misalnya, di halaman demo ini.
  2. Klik dua kali sel di kolom Kunci atau Nilai untuk mengedit kunci atau nilai tersebut.
  3. Muat ulang halaman untuk menerapkan.

Menghapus pasangan nilai kunci localStorage

  1. Melihat pasangan nilai kunci localStorage domain. Misalnya, di halaman demo ini.
  2. Klik pasangan nilai kunci untuk memilihnya.
  3. Klik Hapus. Hapus di panel tindakan di bagian atas untuk menghapus pasangan yang dipilih. Menghapus pasangan nilai kunci yang dipilih.
  4. Atau, klik Hapus semua. Hapus semua untuk menghapus semua pasangan.

Berinteraksi dengan localStorage dari Konsol

Karena Anda dapat menjalankan JavaScript di Konsol, dan karena Konsol memiliki akses ke konteks JavaScript halaman, Anda dapat berinteraksi dengan localStorage dari Konsol.

  1. Di DevTools, buka Konsol.
  2. Jika Anda ingin mengakses pasangan nilai kunci localStorage dari domain selain halaman yang sedang Anda buka, pilih konteks JavaScript yang Anda perlukan dari menu drop-down konteks di panel tindakan di bagian atas.
  3. Jalankan ekspresi localStorage di Konsol, sama seperti yang Anda lakukan di JavaScript.

Berinteraksi dengan `localStorage` dari Konsol