Tarayıcı penceresi / sekmesi kapatıldığında bir localStorage öğesi nasıl silinir?

Benim Durumum: tarayıcı kapalıyken ve tek sekme değil silinmesi gereken anahtar + değere sahip localStorage.

Kodum uygunsa ve ne geliştirilebilir bakın:

//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;
});

delete operatörü ile değil, böyle yapılması gerekir:

localStorage.removeItem(key);

windowGlobal anahtar kelimeyle kullanın : -

 window.localStorage.removeItem('keyName');

Sen yararlanabilirler beforeunloadJavaScript olay.

Vanilya JavaScript kullanarak aşağıdakileri yapabilirsiniz:

window.onbeforeunload = function() {
  localStorage.removeItem(key);
  return '';
};

Bu, tarayıcı penceresi / sekmesi kapatılmadan önce anahtarı siler ve pencereyi / sekmeyi kapat eylemini onaylamanızı ister. Umarım sorununuzu çözer.

Not: onbeforeunloadyöntem bir dize döndürmelidir.

Tarayıcı kapatıldığında anahtarın silinmesini istiyorsanız sessionStorage'ı kullanmalısınız.

Kullanmayı deneyin

$(window).unload(function(){
  localStorage.clear();
});

Umarım bu senin için çalışır

LocalStorage yerine sessionStorage kullanmak için herhangi bir önerinin gerçekten yardımcı olmadığı çok özel bir kullanım durumu vardır. Use-case, en az bir sekme açılmışken depolanan bir şeyi saklamak kadar basit bir şey olabilir, ancak kalan son sekmeyi kapatırsanız geçersiz kılın. Değerlerinizin çapraz sekme ve pencereye kaydedilmesi gerekiyorsa, denediğim gibi dinleyicileri ile hayatınızı zorlaştırmazsanız sessionStorage size yardımcı olmaz. Bu arada localStorage bunun için mükemmel olurdu, ancak 'tarayıcınızı yeniden başlattıktan sonra bile verileriniz orada bekleyeceği için işi' çok iyi 'yapıyor. Her ikisinden de yararlanan özel bir kod ve mantık kullanarak sona erdi.

Açıklamayı tercih edip kod vermeyi tercih ederim. Önce localStorage'da ihtiyacınız olanı saklayın, ardından localStorage'da açtığınız sekmelerin sayısını içeren bir sayaç oluşturun. Bu, sayfa her yüklendiğinde artar ve sayfa her yüklendiğinde azalır. Kullanılacak olayları burada seçebilirsiniz, 'yükle' ve 'kaldır' öneririm. Boşaltma sırasında, sayaç 0'a ulaştığında yapmak istediğiniz temizleme görevlerini yapmanız gerekir, yani son sekmeyi kapatırsınız. İşte zor kısmı geliyor: Bir sayfanın yeniden yüklenmesi veya sayfa içinde gezinme ile sekmenin kapatılması arasındaki farkı anlatmanın güvenilir ve genel bir yolunu bulamadım. Dolayısıyla, depoladığınız veriler, bunun ilk sekmeniz olup olmadığını kontrol ettikten sonra yük üzerinde yeniden oluşturabileceğiniz bir şey değilse, her yenileme işleminde kaldıramazsınız. Bunun yerine, sekme sayacını artırmadan önce sessionStorage'da her yükte bir bayrak depolamanız gerekir. Bu değeri saklamadan önce, zaten bir değere sahip olup olmadığını kontrol edebilirsiniz ve eğer yoksa, bu oturuma ilk kez yüklediğiniz anlamına gelir, yani eğer yükü temizlerseniz değeri ayarlanmadı ve sayaç 0.

sessionStorage kullan

SessionStorage nesnesi, verileri yalnızca bir oturum için depolaması dışında localStorage nesnesine eşittir. Kullanıcı tarayıcı penceresini kapattığında veriler silinir.

Aşağıdaki örnek, bir kullanıcının geçerli oturumda bir düğmeyi kaç kez tıkladığını sayar:

Misal

if (sessionStorage.clickcount) {
    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
    sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";

for (let i = 0; i < localStorage.length; i++) {
    if (localStorage.key(i).indexOf('the-name-to-delete') > -1) {
        arr.push(localStorage.key(i));
    }
}

for (let i = 0; i < arr.length; i++) {
    localStorage.removeItem(arr[i]);
}

localStorage.removeItem(key);  //item

localStorage.clear(); //all items

Bazı kullanıcılar zaten bu soruyu zaten cevaplamış olsa da, bu sorunu çözmek için uygulama ayarlarına bir örnek veriyorum.

Aynı sorunu yaşadım. Angularjs uygulamamda https://github.com/grevory/angular-local-storage modülünü kullanıyorum . Uygulamanızı aşağıdaki gibi yapılandırırsanız, yerel depolama yerine oturum depolama alanına değişkeni kaydeder. Bu nedenle, tarayıcıyı kapatır veya sekmeyi kapatırsanız, oturum depolama alanı otomatik olarak kaldırılır. Hiçbir şey yapmanıza gerek yok.

app.config(function (localStorageServiceProvider) {
  localStorageServiceProvider
  .setPrefix('myApp')
  .setStorageType('sessionStorage')
});

Umarım yardımcı olur.

Seçim yapabileceğiniz beş yöntem vardır:

• setItem (): localStorage öğesine anahtar ve değer ekleyin
• getItem (): localStorage öğesinden anahtarla bir değer al
• removeItem (): Bir öğeyi localStorage öğesinden anahtarla kaldırın
• clear (): Tüm localStorage öğelerini temizle
• key (): Bir localStorage öğesinin n'inci anahtarını almak için bir sayı iletti

Çağrıldığında clear (), bu yöntemi kullanarak söz konusu alan için tüm kayıtların tüm depolama alanını temizler. Herhangi bir parametre almaz.

window.localStorage.clear();

Yerel depolama ile çalışırken tarayıcı desteğiniz olup olmadığını görmek için basit bir test:

if(typeof(Storage)!=="undefined") {
  console.log("localStorage and sessionStorage support!");
  console.log("About to save:");
  console.log(localStorage);
  localStorage["somekey"] = 'hello';
  console.log("Key saved:");
  console.log(localStorage);
  localStorage.removeItem("somekey");  //<--- key deleted here
  console.log("key deleted:");
  console.log(localStorage);
  console.log("DONE ===");
} else {
  console.log("Sorry! No web storage support..");
}

Benim için beklendiği gibi çalıştı (Google Chrome kullanıyorum). Uyarlanmış: http://www.w3schools.com/html/html5_webstorage.asp .

Burada sunulan çözüm% 100 doğru olduğunu düşünmüyorum çünkü window.onbeforeunload olayı yalnızca tarayıcı / Sekme kapatıldığında (HANGİ GEREKLİ) değil, aynı zamanda diğer tüm olaylarda da çağrılır. (GEREKLİ OLMAYANLAR)

Pencereyi ateşleyebilecek olayların listesi hakkında daha fazla bilgi için bu bağlantıya bakın.

http://msdn.microsoft.com/en-us/library/ms536907(VS.85).aspx

neden sessionStorage kullanılmıyor?

"SessionStorage nesnesi, verileri yalnızca bir oturum için depolaması dışında localStorage nesnesine eşittir. Kullanıcı tarayıcı penceresini kapattığında veriler silinir."

http://www.w3schools.com/html/html5_webstorage.asp

Sorulduktan 6 yıl sonra bu soruya baktıktan sonra, bu soruya hala yeterli bir cevap olmadığını buldum; ve aşağıdakilerin tümünü gerçekleştirmelidir:

• Tarayıcıyı (veya alanın tüm sekmelerini) kapattıktan sonra Yerel Depolamayı Temizle
• En az bir sekme etkin kalırsa Yerel Depolamayı sekmeler arasında koruyun
• Tek bir sekmeyi yeniden yüklerken Yerel Depolamayı koru

Yukarıdakilere ulaşmak için bu javascript parçasını her sayfa yükünün başlangıcında yürütün:

((nm,tm) => {
    const
            l = localStorage,
            s = sessionStorage,
            tabid = s.getItem(tm) || (newid => s.setItem(tm, newid) || newid)((Math.random() * 1e8).toFixed()),
            update = set => {
                let cur = JSON.parse(l.getItem(nm) || '{}');
                if (set && typeof cur[tabid] == 'undefined' && !Object.values(cur).reduce((a, b) => a + b, 0)) {
                    l.clear();
                    cur = {};
                }
                cur[tabid] = set;
                l.setItem(nm, JSON.stringify(cur));
            };
    update(1);
    window.onbeforeunload = () => update(0);
})('tabs','tabid');

Düzenleme: Buradaki temel fikir şudur:

1. Sıfırdan başlarken, oturum depolama alanına şu anahtarda rastgele bir kimlik atanır: tabid
2. Daha sonra yerel depolama, tabsbu anahtarı bir nesne içeren adlı bir anahtarla ayarlanır.tabid 1 olarak ayarlanır.
3. Sekme kaldırıldığında, yerel depolama tabsalanları aşağıdakileri içeren bir nesneye güncellenirtabid alanları 0 olarak ayarlanmış .
4. Sekme yeniden yüklenirse, önce kaldırılır ve devam ettirilir. Oturum depolama alanı anahtarı tabidbulunduğundan, yerel depolama tabsanahtarı databid temizlenmez.
5. Tarayıcı kaldırıldığında, tüm oturum depolama alanları silinir. Oturum yeniden başlatıldığında tabidartık depolama alanı mevcut olmaz ve yeni bir tabidveri oluşturulur. Yerel depolama biriminin bunun için bir alt anahtarı tabidveya başka herhangi bir anahtarı olmadığındantabid oturumu olmadığından (tüm oturumlar kapatıldı) temizlendi.
6. Yeni oluşturulan bir sekmede, tabidoturum deposunda yeni bir oluşturulur, ancak en az bir tabs[ tabid] bulunduğundan, yerel depolama alanı temizlenmez

Bu eski bir soru, ama yukarıdaki cevabın hiçbiri mükemmel görünmüyor.

Eğer güvenebileceğiniz, mağaza kimlik doğrulama veya tarayıcı kapatıldığında sadece tahrip olan hassas bilgilere istiyoruz sessionStoragevelocalStorage çapraz sekme Mesaj yollama için.

Temel olarak, fikir:

1. Açılan önceki sekmeden önyükleme yaparsınız, böylece hem sizin localStoragehem sessionStoragede boştur (eğer değilse, temizleyebilirsiniz localStorage). Cihazınıza bir mesaj etkinliği dinleyicisi kaydetmeniz gerekir.localStorage .
2. Kullanıcı bu sekmede (veya alan adınızda açılan herhangi bir sekmede) hassas bir bilginin kimliğini doğrular / oluşturur.
3. sessionStorageHassas bilgileri depolamak için güncelleştirin ve localStoragebu bilgileri saklamak için kullanın ve sonra silin (veri değiştiğinde olay kuyruğa girdiğinden, burada zamanlama ile ilgilenmezsiniz). O sırada açılan diğer sekmeler ileti etkinliğinde geri çağrılacak sessionStorageve hassas bilgilerle güncellenecektir .
4. Kullanıcı alan adınızda yeni bir sekme açarsa sessionStorageboş olur. Kodun localStorage(örnek: için req) bir anahtarı ayarlaması gerekir . Diğer tüm sekmeler mesaj etkinliğinde geri çağrılacak, o anahtara bakacak ve sessionStorageeğer varsa, (3'teki gibi) hassas bilgilerle cevaplayabilecektir .

Bu şemanın window.onbeforeunloadkırılgan bir olaya bağlı olmadığını lütfen unutmayın (tarayıcı bu olaylar tetiklenmeden kapatılabilir / çökebilir). Ayrıca, hassas bilgilerinlocalStorage çok küçüktür (çapraz sekme mesajı olayı için transcients değişiklik algılamasını kullandığınızdan), bu nedenle bu tür hassas bilgilerin kullanıcının sabit diskine sızması olası değildir.

İşte bu kavramın bir demosu: http://jsfiddle.net/oypdwxz7/2/

Tarayıcı kapatmayı algılamanın böyle bir yolu yoktur, bu nedenle muhtemelen tarayıcı kapatıldığında localStorage'ı silemezsiniz, ancak tarayıcı kapatıldıktan sonra yok edeceği için sessionCookies'i kullanabileceğiniz şeyleri işlemenin başka bir yolu vardır.

SessionStorage'ı kullanabilirsiniz. Çünkü sessionStorage, tarayıcı penceresi kapatıldığında tüm anahtar değerlerinin temizlenmesine izin verir.

Oraya bakınız: SessionStorage- MDN

yerel depolamayı silmek için aşağıdaki kodu deneyebilirsiniz:

delete localStorage.myPageDataArr;