Lihat dan edit penyimpanan lokal

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Panduan ini menunjukkan cara menggunakan Chrome DevTools untuk melihat, mengedit, dan menghapus key-value pair localStorage. Penyimpanan lokal menyimpan data di seluruh sesi browser.

Lihat 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.

    Menampilkan nilai kunci yang dipilih.

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

Filter key-value pair

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

Memfilter pasangan nilai kunci yang tidak berisi string 'has'.

Buat pasangan nilai kunci localStorage baru

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

Edit kunci atau nilai localStorage

  1. Lihat key-value pair localStorage domain. Misalnya, pada halaman demo ini.
  2. Klik sel dua kali di kolom Key atau Value untuk mengedit kunci atau nilai tersebut.
  3. Muat ulang halaman untuk menerapkan.

Hapus localStorage key-value pair

  1. Lihat key-value pair localStorage domain. Misalnya, pada halaman demo ini.
  2. Klik pasangan nilai kunci untuk memilihnya.
  3. Klik Hapus. Hapus pada 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 dibuka, pilih konteks JavaScript yang diperlukan dari menu drop-down konteks pada panel tindakan di bagian atas.
  3. Jalankan ekspresi localStorage di Konsol, sama seperti yang Anda lakukan di JavaScript.

Berinteraksi dengan `localStorage` dari Console