LocalStorage ile Popup Örneği

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]

HTML5 ile Gelen “Local Storage” Nedir ? Nerelerde Kullanılır ?

Front-end Developerlar için kullanıcının bilgisayarında bilgi saklamak güzel bir şey olsa gerek. Bu yazı içerisinde, kolay bir şekilde kullanıcı bilgisayarında küçük bilgiler saklamak, sonradan onları okumak ve bunlarla neler yapılacağını açıklamaya çalışacağım.

Neden “Local Storage” ?

Web sitenizde bir uygulama olduğunu düşünelim. Uygulamayı web sitesi üzerinde kullanıp kapattıktan sonra tekrardan açmak istediğinizde her şey sıfırlanmış olur. Eğer aynı şeyi masaüstü uygulamalarda yapmak isterseniz tam tersi durumda, nerede kaldıysanız oradan devam etme şansı tanır.

Yukarıdaki sebepten ötürü, Front-end Developer bazı durumlarda bu bilgilerin bir yerde saklanmasına ihtiyaç duyar. Normalde bu back-end development tarafında, kullanıcı adı şifresi girilerek kurtarılabilir. Peki sisteme giriş yapmayan, daha da öte back-end tarafı ile ilişiğimiz olmadan bu işlemleri yapmak istediğimizde ne olacak ? İşte burada local storage devreye giriyor. Böylelikle sistemimize gelen kullanıcıyı, küçük bir “değer” ile tanıyabileceğiz!

Cookie Vardı, Local Storage ile Cookie Farkı Ne ?

Local Storage gelmeden önce cookie’leri kullanıyorduk. Cookie, kullanıcının bilgisayarında bulunun küçük bir text dosyası olarak tanımlayabilir, bu dosya sizin web siteniz açıldığı sırada domain ile eşleşip işlem görebilecek güce sahiptir de diyebiliriz. Bu dosya içerisine istediğiniz gibi “data” yazabilir, okuyabilir veya silebilirsiniz. Buraya kadar her şey güzel ama bazı noktalar ile limitlendirilmiş durumda:

  • Web sitesine her girilip sayfa yüklendiğinde okunurlar.
  • 4 KB’lık data saklarlar.
  • Bazı güvenlik sorunlarına da neden olabilirler.

HTML5 Destekleyen Browserlarda Local Storage Kullanımı

Local Storage‘n kullanımı sandığınız kadar zor değil. Javascript içerisinde localStorage objesi ile her şeyi yapabilirsiniz. setItem() ve getItem() methodlarını kullanarak bunu yapabiliriz:

[code lang=”js”]
localStorage.setItem(‘socialpopupdate’,’02.12.2013′);
[/code]

Eğer socialpopupdate key’ini okumaya çalışırsak, bize 02.12.2013 değerini dönecektir.

[code lang=”js”]
var tarih = localStorage.getItem(‘socialpopupdate’);
// ->; "02.12.2013"
[/code]

Eğer bu değeri silmek istersek de sizin de tahmin edebileceğiniz üzere removeItem() methodunu kullanabiliriz:

[code lang=”js”]
localStorage.removeItem(‘socialpopupdate’);
var tarih = localStorage.getItem(‘socialpopupdate’);
// ->; null
[/code]

Evet, bu kadar. Küçük bir tüyo verecek olursam da, localStorage yerine sessionStorage’i kullanırsak browser penceresi kapanana kadar data saklayabiliriz.

HTML5 ‘Download’ Attribute’u

Bildiğiniz üzere web sitesi içerisinde download linki oluşturmak oldukça basit bir işlem. Download ettireceğimiz dosyanın adresini <a> tag’i içerisine verdiğimizde bu işi halletmiş oluyoruz. Bazı modern browser’larda PDF, imaj veya text gibi dosyalara link verdiğimizde yeni tab’da açılmaları da ayrı bir problem olabiliyor. İşte bu noktada HTML5’in ‘download’ attribute’u devreye sokmanın zamanı gelmiş demektir.

Download Attribute’u Nasıl Kullanırız ?

Download attribute’u ile bir taşla iki kuş vurabiliyoruz:

  • İlki yukarıda bahsettiğim yeni tabda, browser içerisinde açmayıp download ettirmek.
  • Download ettirirken dosya ismini istediğiniz gibi verebilmeniz.

Örnek verecek olursam, PDF veya imaj dosyamız sunucu veya bizim tarafımızdan rastgele oluşturulmuş bir isimden oluşsun.

[code lang=”js”]
<a href="dosya/bn213nbv123e.pdf">Download PDF</a>
<a href="dosya/JHgbnmbmnGH.jpg">Download Image</a>
[/code]

HTML5’deki download attribute’u sayesinde yukarıdaki iki dosya browser’da açılacaktır. Download Attribute’unu sisteme eklediğimizde:

[code lang=”js”]
<a href="dosya/bn213nbv123e.pdf" download="HTML5 ile İlgili Bilmeniz Gereken Şeyler.pdf">Download PDF</a>
<a href="dosya/JHgbnmbmnGH.jpg" download="PS4.jpg">Download Image</a>
[/code]

Örnek dosyaları bilgisayarınıza indirmek için: TIKLAYINIZ