Daha önceki yazımda localStorage hakkında temel bilgilere değindikten sonra bu yazımda da sizlere güzel bir örnek vermek istiyorum. Çalıştığım takımdaki arkadaşlarımdan, web sitemize giriş yapan kullanıcı karşısına direk olarak sosyal medya bağlantılarımızın olduğu “takip et” butonlarının ( Facebook, Twitter, Google Plus ) bulunduğu bir popup çıkarma isteği geldi. Ama burada küçücük bir sorun vardı. Siteye giriş yapan her kullanıcı, her giriş yaptığında bu popup’u görmek zorunda mıydı ?

LocalStorage ile Popup’ı Belirli Zaman Dilimlerinde Çıkarsak ?

İşte bu noktada yardımıma localStorage koştu. Web sitesine gelen x kullanıcısına bir “değer” atasaydık, her geldiğinde çıkmasaydı ama arada da sosyal medya hesaplarımızı hatırlatmak isteseydik fena mı olurdu ? Yapılacak adımları sıralayacak olursak:

• İlk defa gelen kullanıcının localStorage’na erişilecek.
• Değerin olup olmadığına bakacak.
• Varsa değeri okuyup farklı bir davranışa yönlendirecek.
• Yoksa değeri oluşturacak.

Harekete Geçelim

Yapacağımız işi kısaca özetlemek istersek, kullanıcı web sitesine girdiğinde sosyal medya ikonlarının bulunduğu popup çıkacak. Ardından localStorage yardımıyla çıktığına dair browser’inde bilgi saklayacağız. Her siteye girdiğinde o bilgiyi okuyup bir ay geçti mi geçmedi mi kontrol edeceğiz. Eğer geçtiyse de tekrardan popup gösterip yeni değerleri localStorage’a gireceğiz.

Ayda bir kere popup çıkaracağımız için, bulunduğumuz ayı çekmekle başlıyoruz ve şu an bulunduğumuz ayı currentMonth değerine atıyoruz. 3. satır ile de socialpopupdate value’sunun olup olmadığını localStorage altından bakıp durumunu localMonth değerine atıyoruz:

[code lang=“js”] var d = new Date(); var currentMonth = (d.getMonth()+1); var localMonth = localStorage.getItem(‘socialpopupdate’); [/code]

Eğer localStorage’da socialpopupdate diye bir kayıt yoksa, kullanıcı web sitemize ilk defa gelmiş demektir. Doğal olarak hemen kaydımızı oluşturup şu an bulunduğumuz ayı localStorage’ına kaydediyip “popupGoster()” ile popupu açıyoruz:

[code lang=“js”] if( localMonth == null){ localStorage.setItem(‘socialpopupdate’,currentMonth); popupGoster() } [/code]

Son olarak da ayda bir kere popup çıkarma işine geldi. Burada da localStorage’da bulunan ay bilgisi, şu an bulunduğumuz ay’a eşit değilse, socialpopupupdate değerimizi siliyoruz. Ardından içinde bulunduğumuz ayın değerini güncelleyip tekrardan popup’u gösteriyoruz:

[code lang=“js”] if( localMonth != currentMonth ){ localStorage.removeItem(‘socialpopupdate’); localStorage.setItem(‘socialpopupdate’,currentMonth); popupGoster() } [/code]