Kasus Saya: penyimpanan lokal dengan kunci + nilai yang harus dihapus ketika browser ditutup dan bukan tab tunggal.
Silakan lihat kode saya jika layak dan apa yang dapat ditingkatkan:
//create localStorage key + value if not exist
if(localStorage){
localStorage.myPageDataArr={"name"=>"Dan","lastname"=>"Bonny"};
}
//when browser closed - psedocode
$(window).unload(function(){
localStorage.myPageDataArr=undefined;
});
javascript
jquery
html
local-storage
Yosef
sumber
sumber
undefined
menimpa item yang disimpan sebelumnya. Tapi ya, menggunakan.removeItem()
lebih tepat.localStorage.clear();
jika Anda ingin menghapus seluruh penyimpanan.Jawaban:
harus dilakukan seperti itu dan tidak dengan operator hapus:
sumber
delete localStorage.key
berfungsi dengan baiklocalStorage.removeItem(key)
. Tampaknya lebih jelas bagi saya untuk menggunakan delete ketika saya mengatur variabel sayalocalStorage.key = 1
suka daripadalocalStorage.setItem('key', 1)
.localStorage.removeItem = null;
, membuatlocalStorage.removeItem(key);
ide yang berpotensi buruk.localStorage.key = 1
di tempat pertama - untuk menghindari kecelakaan seperti iniGunakan dengan
window
kata kunci global: -sumber
localStorage.removeItem(key)
bekerja dengan baik.Anda dapat memanfaatkan
beforeunload
acara dalam JavaScript.Dengan menggunakan vanilla JavaScript Anda dapat melakukan sesuatu seperti:
Itu akan menghapus kunci sebelum jendela / tab browser ditutup dan meminta Anda untuk mengkonfirmasi tindakan tutup jendela / tab. Saya harap itu menyelesaikan masalah Anda.
CATATAN:
onbeforeunload
Metode ini harus mengembalikan string.sumber
Anda harus menggunakan sessionStorage sebagai gantinya jika Anda ingin kunci dihapus ketika browser ditutup.
sumber
sessionStorage
adalah obat untuk apa yang dijelaskan si penanya.sessionStorage
, tetapi Draft Editor W3C mengatakan: 'Masa pakai konteks penelusuran tidak dapat dikaitkan dengan masa proses agen pengguna yang sebenarnya itu sendiri, karena agen pengguna dapat mendukung sesi melanjutkan setelah restart.'Coba gunakan
Semoga ini berhasil untuk Anda
sumber
localStorage.clear();
Ada kasus penggunaan yang sangat spesifik di mana setiap saran untuk menggunakan sessionStorage bukan localStorage tidak benar-benar membantu. Kasing akan menjadi sesuatu yang sederhana seperti menyimpan sesuatu saat Anda memiliki setidaknya satu tab dibuka, tetapi membatalkannya jika Anda menutup sisa tab terakhir. Jika Anda ingin nilai-nilai Anda disimpan tab-silang dan jendela, sessionStorage tidak membantu Anda kecuali Anda menyulitkan hidup Anda dengan pendengar, seperti yang telah saya coba. Sementara itu localStorage akan menjadi sempurna untuk ini, tetapi melakukan pekerjaan 'terlalu baik', karena data Anda akan menunggu di sana bahkan setelah restart browser. Saya akhirnya menggunakan kode khusus dan logika yang memanfaatkan keduanya.
Saya lebih suka menjelaskan daripada memberikan kode. Pertama-tama simpan apa yang Anda butuhkan di localStorage, kemudian juga di localStorage buat penghitung yang akan berisi jumlah tab yang telah Anda buka. Ini akan meningkat setiap kali halaman dimuat dan berkurang setiap kali halaman dibongkar. Anda dapat memilih di sini tentang acara yang akan digunakan, saya sarankan 'muat' dan 'bongkar'. Pada saat Anda membongkar, Anda perlu melakukan tugas pembersihan yang ingin Anda lakukan ketika penghitung mencapai 0, artinya Anda menutup tab terakhir. Inilah bagian yang sulit: Saya belum menemukan cara yang dapat diandalkan dan generik untuk mengetahui perbedaan antara memuat ulang halaman atau navigasi di dalam halaman dan penutupan tab. Jadi, jika data yang Anda simpan bukan sesuatu yang dapat Anda bangun kembali setelah memeriksa bahwa ini adalah tab pertama Anda, maka Anda tidak dapat menghapusnya di setiap penyegaran. Alih-alih, Anda perlu menyimpan bendera di sessionStorage di setiap beban sebelum menambah penghitung tab. Sebelum menyimpan nilai ini, Anda dapat melakukan pengecekan untuk melihat apakah sudah memiliki nilai dan jika tidak, ini berarti Anda memuat ke dalam sesi ini untuk pertama kalinya, artinya Anda dapat melakukan pembersihan saat memuat jika ini nilai tidak diatur dan penghitung adalah 0.
sumber
gunakan sessionStorage
Objek sessionStorage sama dengan objek localStorage, kecuali bahwa itu menyimpan data hanya untuk satu sesi. Data dihapus ketika pengguna menutup jendela browser.
Contoh berikut menghitung berapa kali pengguna mengklik tombol, pada sesi saat ini:
Contoh
sumber
sumber
sumber
Meskipun, beberapa pengguna sudah menjawab pertanyaan ini, saya memberikan contoh pengaturan aplikasi untuk mengatasi masalah ini.
Saya memiliki masalah yang sama. Saya menggunakan modul https://github.com/grevory/angular-local-storage dalam aplikasi angularjs saya. Jika Anda mengonfigurasi aplikasi Anda sebagai berikut, itu akan menyimpan variabel dalam penyimpanan sesi, bukan penyimpanan lokal. Karena itu, jika Anda menutup browser atau menutup tab, penyimpanan sesi akan dihapus secara otomatis. Anda tidak perlu melakukan apa pun.
Semoga ini bisa membantu.
sumber
Ada lima metode untuk dipilih:
Anda dapat menggunakan clear (), metode ini ketika dipanggil membersihkan seluruh penyimpanan semua catatan untuk domain itu. Itu tidak menerima parameter apa pun.
sumber
Berikut adalah tes sederhana untuk melihat apakah Anda memiliki dukungan browser ketika bekerja dengan penyimpanan lokal:
Itu bekerja untuk saya seperti yang diharapkan (saya menggunakan Google Chrome). Diadaptasi dari: http://www.w3schools.com/html/html5_webstorage.asp .
sumber
Saya tidak berpikir solusi yang disajikan di sini adalah 100% benar karena window.onbeforeunload acara dipanggil tidak hanya ketika browser / Tab ditutup (YANG DIPERLUKAN), tetapi juga pada semua beberapa acara lainnya. (YANG MUNGKIN TIDAK DIBUTUHKAN)
Lihat tautan ini untuk informasi lebih lanjut tentang daftar peristiwa yang dapat memunculkan window.onbeforeunload: -
http://msdn.microsoft.com/en-us/library/ms536907(VS.85).aspx
sumber
mengapa tidak menggunakan sessionStorage?
"Objek sessionStorage sama dengan objek localStorage, kecuali bahwa itu menyimpan data hanya untuk satu sesi. Data dihapus ketika pengguna menutup jendela browser."
http://www.w3schools.com/html/html5_webstorage.asp
sumber
Setelah melihat pertanyaan ini 6 tahun setelah ditanyakan, saya menemukan bahwa masih belum ada jawaban yang memadai untuk pertanyaan ini; yang harus mencapai semua hal berikut:
Jalankan potongan javascript ini di awal setiap pemuatan halaman untuk mencapai hal di atas:
Sunting: Ide dasar di sini adalah sebagai berikut:
tabid
tabs
berisi objek kuncitabid
tersebut diatur ke 1.tabs
diperbarui ke objek yang berisitabid
set ke 0.tabid
ada, dan begitu jugatabs
kunci penyimpanan lokal dengan sub-kuncitabid
penyimpanan lokal tidak dihapus.tabid
tidak akan ada lagi dan yang barutabid
akan dihasilkan. Karena penyimpanan lokal tidak memiliki sub-kunci untuk initabid
, atau yang lainnyatabid
(semua sesi ditutup), maka dihapus.tabid
dihasilkan di penyimpanan sesi, tetapi karena setidaknya satutabs
[tabid
] ada, penyimpanan lokal tidak dihapussumber
window.onbeforeunload
maka tidak akan dipanggil, dan lokaltabs[tabid]
tidak akan disetel ke 0 => penyimpanan lokal tidak akan pernah dihapus lagi. Saya pikir pengawas akan lebih tepat dalam hal itu, daripada menulis 1 pada pemuatan tab, Anda harus menulis cap waktu saat ini. Kemudian di bagian pengurangan, Anda harus menyatakan penundaan karena cap waktu itu tidak terlalu besar atau ganti dengan 0 jika itu. Dengan begitu, Anda tidak bergantung pada panggilan sebenarnyaonbeforeunload
. Tab hanya perlu mengatur ulang pengawas dari waktu ke waktu untuk mempertahankan keberadaan penyimpanan lokal.Ini adalah pertanyaan lama, tetapi sepertinya tidak ada jawaban di atas yang sempurna.
Jika Anda ingin menyimpan otentikasi atau informasi sensitif apa pun yang dihancurkan hanya ketika browser ditutup, Anda dapat mengandalkan
sessionStorage
danlocalStorage
untuk meneruskan pesan antar tab.Pada dasarnya, idenya adalah:
localStorage
dansessionStorage
kosong (jika tidak, Anda dapat menghapuslocalStorage
). Anda harus mendaftarkan pendengar acara pesan dilocalStorage
.sessionStorage
untuk menyimpan informasi sensitif, dan menggunakanlocalStorage
untuk menyimpan informasi ini, lalu menghapusnya (Anda tidak peduli tentang waktu di sini, karena acara itu antri ketika data berubah). Tab lain yang dibuka pada saat itu akan dipanggil kembali pada acara pesan, dan akan memperbarui merekasessionStorage
dengan informasi sensitif.sessionStorage
akan kosong. Kode harus menetapkan kunci dilocalStorage
(untuk contoh:)req
. Tab lainnya (semua) akan dipanggil kembali di acara pesan, lihat kunci itu, dan dapat menjawab dengan informasi sensitif darisessionStorage
(seperti pada 3), jika ada.Harap perhatikan bahwa skema ini tidak bergantung pada
window.onbeforeunload
acara yang rapuh (karena browser dapat ditutup / macet tanpa acara ini dipecat). Selain itu, waktu informasi sensitif disimpan padalocalStorage
sangat kecil (karena Anda mengandalkan deteksi perubahan transcien untuk acara pesan tab silang) sehingga tidak mungkin bahwa informasi sensitif tersebut bocor pada hard drive pengguna.Berikut ini demo konsep ini: http://jsfiddle.net/oypdwxz7/2/
sumber
Tidak ada cara seperti itu untuk mendeteksi penutupan browser jadi mungkin Anda tidak dapat menghapus penyimpanan lokal pada penutupan browser tetapi ada cara lain untuk menangani hal-hal yang Anda dapat menggunakan sessionCookies karena akan hancur setelah browser tutup. Ini saya terapkan dalam proyek saya.
sumber
Anda cukup menggunakan sessionStorage. Karena sessionStorage memungkinkan untuk menghapus semua nilai kunci ketika jendela browser akan ditutup.
Lihat di sana: SessionStorage- MDN
sumber
Anda dapat mencoba kode berikut untuk menghapus penyimpanan lokal:
sumber
localStorage.removeItem(key);
untuk menghapus kunci.delete
? Saya mencoba, dan itu berhasil. Apakah ada efek samping atau sesuatu yang tidak boleh kita gunakan hapus? Terima kasih.delete
bukan praktik terbaik dalamlocalStorage