Cara melihat atau mengedit Penyimpanan lokal

259

Saya membuat ekstensi Chrome dan menggunakan localStorage untuk menyimpan data.

Saya mengakses localStorage melalui "background_page".

Ini berfungsi dengan baik tetapi bagaimana saya bisa melihat nilainya secara manual? Di Firefox Anda dapat menggunakan Firebug.

Apakah ada yang mempunyai saran?

google-chrome local-storage Joe Doe
sumber

Jawaban:

270

Itu mudah. Cukup buka alat pengembang dengan menekan F12, lalu buka tab Aplikasi . Di bagian Penyimpanan memperluas Penyimpanan Lokal . Setelah itu, Anda akan melihat semua penyimpanan lokal browser Anda di sana.

Giorgi Gzirishvili
sumber
33
Di Chrome versi 60 Anda tidak dapat memodifikasi atau menambahkan item baru, Anda harus melakukannya melalui konsol danlocalStorage.setItem('key', 'value')
Jim Aho
9
Di Chrome versi 65, Anda dapat memodifikasi dan menambahkan item baru secara manual. Klik dua kali di bawah pasangan nilai kunci terakhir dalam daftar nilai kunci di Aplikasi> Penyimpanan Lokal untuk menambahkan nilai baru.
Rose Perrone
169

Cukup buka Alat Pengembang dengan menekan F12.

Klik pada tab Aplikasi (sebelumnya Sumber) dan Anda akan melihat konten localStorage. Dari sana Anda dapat menambah / mengedit / menghapus entri kunci / nilai secara manual.

tab sumber daya penyimpanan lokal

Pada OS X kuncinya adalah: ⌥+ ⌘+i

Kombinasi lain: Ctrl+ Shift+i

EDIT: Di Chrome 56 tampilannya seperti ini:

masukkan deskripsi gambar di sini

Simone
sumber
4
Yap sudah mencobanya tetapi localStorage kosong. Mungkin karena saya memuat ekstensi yang belum dibuka?
Joe Doe
Ini dapat membantu Anda: stackoverflow.com/questions/3598669/…
Simone
3
Simone, saya tahu cara mengatur dan membaca localStorage dengan JS, tapi saya perlu mengedit / menghapusnya secara manual
Joe Doe
Tidak perlu melakukannya dengan JS, dimungkinkan untuk menambah / mengedit / menghapus entri dari UI
Simone
17

Saya menggunakan chrome Versi 52.0.2743.82 m saat ini. Di versi chrome terbaru ini, Anda dapat melihat nilai penyimpanan lokal dengan meluncurkan "Alat Pengembang" dan kemudian melihat ke tab "Aplikasi".

Luke P. Issac
sumber
15

Anda dapat pergi ke chrome: // chrome / extensions dan akan ada tautan ke halaman latar belakang Anda yang begitu Anda luncurkan Anda dapat menggunakan Dev Tools untuk melihat barang-barang penyimpanan lokal.

Ryan S
sumber
Terima kasih atas jawaban @Ryan S tetapi localStorage kosong saya atur seperti inilocalStorage['xy'] = JSON.stringify(xy);
Joe Doe
2
Di konsol chrome yang dapat Anda lakukan localStorage.setItem('xy', JSON.stringify(xy))dan itu akan mengatur item di localStorage
Ryan S
2
lakukan chrome: // chrome-url /, maka penyimpanan lokal
khaled_webdev
2

Entah saya tidak mengerti apa yang orang-orang di sini coba lakukan, dan itu bukan apa yang saya lakukan, dan / atau alat pengembang Chrome telah berubah, dan rusak dalam hal ini.

Skrip konten ekstensi saya menyimpan data seperti ini:

chrome.storage.local.set(packet);

Ketika saya melihat tab Aplikasi dari halaman latar belakang ekstensi, dan memperluas Storage> Local Storage, saya melihat ekstensi saya terdaftar, tetapi mengkliknya tidak menunjukkan data.

Satu-satunya solusi yang saya temukan adalah menjalankan ini di konsol halaman latar belakang:

chrome.storage.local.get(null, function(data) {console.log(data);})

Itu mirip dengan bagaimana ekstensi membacanya (kecuali melewati nol untuk mendapatkan semua kunci, bukan nama kunci untuk mendapatkan hanya yang saya inginkan) dan itu berfungsi dengan baik, itu hanya canggung untuk mengetiknya setiap waktu. Juga aneh bahwa ada semua jawaban di sini yang tidak cocok untuk saya.

Saya menggunakan Chrome 73.0.3683.103 (Bangun Resmi) (64-bit) pada Windows 10. Ekstensi masih dibongkar, jika itu relevan, tapi itu waktu yang paling mungkin Anda ingin melakukan ini, yaitu dalam pengembangan.

enigment
sumber