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.