JavaScript Local Storage ve Session Storage, çerezlerden daha güvenilir ve esnek bir depolama seçeneği sunar Bu makalede bu depolama yöntemlerinin nasıl kullanılacağı anlatılıyor Hemen okuyun ve web uygulamalarınızda daha iyi bir saklama seçeneği keşfedin!
Web geliştiricilerin sıklıkla kullanmış olduğu birçok veri depolama yöntemi vardır. Ancak, oldukça kullanışlı olan JavaScript Local Storage ve Session Storage yöntemleri son zamanlarda oldukça popüler hale geldi. Bu depolama yöntemleri özellikle, cookie'lerden daha iyi avantajlara sahiptir. Bu nedenle, bu makalede sizlere JavaScript Local Storage ve Session Storage kullanımı ve avantajları hakkında bilgilendirici bir makale sunulmaktadır.
JavaScript Local Storage Nedir?
JavaScript Local Storage, web sitesindeki kullanıcı bilgilerinin yerel olarak saklanmasına olanak tanıyan bir mekanizmadır. Kullanıcıların verileri tarayıcılarının üzerinde tutarak, sonraki ziyaretlerinde sitede kaldıkları yerden devam etmelerini sağlar. Local Storage, kullanıcının verilerini tarayıcı ayarlarında yer alan Cookie'lerden daha fazla depolama alanı sunar.
Local Storage kullanılarak sayfadaki verilerin içeriği değiştirilebilir, güncellenebilir veya silinebilir. Bu veriler, bir anahtar değer çifti şeklinde saklanır ve anahtar kullanarak veriye erişim sağlanır. Bir örnek olarak, bir web sitesi kullanıcının seçtiği tema rengini Local Storage'a kaydedebilir ve sonraki ziyaretlerde bu rengi tekrar uygulayabilir.
Local Storage kullanımı oldukça basittir. Tarayıcı tarafından localStorage nesnesi otomatik olarak oluşturulur ve JavaScript kodu ile erişilir. Veri kaydederken, localStorage.setItem() fonksiyonu kullanılır. Örnek olarak;
| Anahtar | Değer |
|---|---|
| themeColor | red |
| userName | John |
Yukarıdaki tablo, anahtar ve değer çiftlerini gösterir. Bu değerler, localStorage.setItem("anahtar", "değer"); fonksiyonu kullanılarak local storage'a kaydedilir. Verilere erişmek için ise localStorage.getItem() fonksiyonu kullanılır. Örneğin, localStorage.getItem("themeColor"); fonksiyonu "red" değerini döndürür.
- Local Storage'da kaydedilen veriler, sadece belirli bir alan için geçerlidir. Farklı bir site ziyaret edildiğinde, Local Storage verileri bu site için geçerli olmaz.
- Local Storage'a saklanan veriler tarayıcı tarafından otomatik olarak şifrelenmez. Bu nedenle, hassas verilerin depolanması önerilmez.
- Local Storage, tarayıcı ayarlarındaki Cookie'lerden daha fazla depolama alanı sunar. Ancak, kullanıcıların kullandığı tarayıcıya göre depolama alanı değişebilir.
JavaScript Session Storage Nedir?
JavaScript Session Storage, HTML5 tarafından tanımlanan bir web depolama özelliğidir. Bu özellik, öncelikle cookie'lere alternatif olarak sunulmuştur. Session Storage, kullanıcı bilgilerini tarayıcının belleğindeki bir anahtar-değer tablosu aracılığıyla saklar. Kullanıcı tarayıcıyı kapattığında session verileri silinir.
Session Storage, localStorage'a benzer şekilde çalışır ancak depolama ömrü oturumlarla sınırlıdır. Session Storage, sayfalar arasında verilerin iletilebilmesi için kullanılır. Kullanımı oldukça basittir. "sessionStorage" nesnesi ile depolama ve veri alma işlemleri yapılabilir.
Session Storage, birden fazla açılan sekme arasında çalışabilen tek bir tarayıcı oturumunu paylaşabilir. Bu, Local Storage ile yapılamayan bir özelliktir. Ancak, önbellek temizleme işlemi yürütülmesi durumunda tüm veriler silinecektir.
Session Storage kullanarak veri depolamak, veri almak ve veri silmek oldukça kolaydır. Aşağıdaki örnekler, Session Storage kullanma yöntemlerini göstermektedir.
| Aksiyon | Kod | Açıklama |
|---|---|---|
| Depolama | sessionStorage.setItem('anahtar', 'değer'); | 'anahtar' adlı veriye, 'değer' değeri atanır. |
| Veri Alma | sessionStorage.getItem('anahtar'); | 'anahtar' adlı verinin değeri alınır. |
| Veri Silme | sessionStorage.removeItem('anahtar'); | 'anahtar' adlı veri silinir. |
Session Storage, birçok modern tarayıcıda desteklenmektedir ancak bazı eski tarayıcılarda çalışmayabilir. Bu nedenle, yöntemlerin kullanımından önce kullanılacak tarayıcının desteklenip desteklenmediği kontrol edilmelidir.
Local Storage ve Session Storage'un Cookie'lere Göre Avantajları
Web uygulamalarının, özellikle de kullanıcılara kişiselleştirilmiş bir deneyim sunmak için gerekli verileri depolaması gerekebilir. Bu veriler bazen sadece seçilen dil gibi küçük bilgiler olabileceği gibi, önceden seçilen tercihler de olabilir. Bu tür verileri depolamak için, geleneksel olarak, çerezler (cookies) kullanılır. Ancak, cookie'lerin bazı dezavantajları vardır. Local Storage ve Session Storage, bu dezavantajları ortadan kaldıran önemli avantajlara sahiptir.
Cookie'lere göre kullanım kolaylığı, Local Storage ve Session Storage'daki verilerin tamamına JavaScript kodu ile erişilebilmesidir. Bu, kullanıcının çerezlerin aksine tekrar girilen verileri yeniden girmek zorunda kalmadan web uygulamalarını kullanabilmesini sağlar. Cookie'ler, sadece 4KB veri depolayabilirken, Local Storage ve Session Storage bunun yanı sıra 5MB'lık bir depolama alanına sahiptir. Bu büyük özellikle sayfa yenilemelerinde kullanılmayan verileri depolamak için kullanışlıdır.
Daha da önemlisi güvenlik konusunda daha güvenlidirler. Cookie'ler kullanıcı kimliği ve şifre gibi hassas bilgileri depolayabilirken, Local Storage ve Session Storage'daki verilerin tamamı yalnızca tarayıcının belleğinde saklanır ve sunuculara gönderilmez. Bu nedenle, kötü niyetli yazılımlar verilere erişemez. Session Storage, sadece oturum (session) boyunca kullanılır ve daha sonra temizlenir. Bu da, gizli veya hassas bilgilerin kötü amaçlı yazılımların erişimine karşı korunmasını sağlar.
Her ne kadar Local Storage ve Session Storage, cookie'lere göre birçok avantaja sahip olsa da, özellikle kullanıcı ayarları gibi küçük verilerin depolanması için hala cookie'lerin kullanılabileceği unutulmamalıdır. Genel olarak, Local Storage ve Session Storage, daha fazla veri depolama gücüne, daha güvenli kullanıma ve kullanım kolaylığına sahip olması nedeni ile web uygulamaları için daha yararlıdır.
Local Storage ve Session Storage Nasıl Kullanılır?
JavaScript ile birlikte Local Storage ve Session Storage kullanımı oldukça basittir. Öncelikle, localStorage ve sessionStorage nesnelerini kullanarak depolama işlemi yapabilirsiniz. Bu nesneler sayesinde verilerinizi tarayıcınızın belleğine kaydedebilirsiniz. Örneğin, local storage kullanarak bir string değer kaydetmek istediğinizde şu kodu kullanabilirsiniz:
| Kod: | localStorage.setItem("anahtar", "değer"); |
|---|
Bu kod sayesinde "anahtar" isimli bir veri, "değer" olarak local storage'a kaydedilir. Kaydedilen bu veriyi, aşağıdaki kod ile alabilirsiniz:
| Kod: | localStorage.getItem("anahtar"); |
|---|
Benzer şekilde sessionStorage nesnesini kullanarak da verilerinizi tarayıcınızın belleğine kaydedebilirsiniz. Fakat sessionStorage verileri, tarayıcınızı kapattığınızda silinirken localStorage verileri kalıcıdır ve silinene kadar saklanır.Eğer kaydettiğiniz bir veriyi silmek isterseniz, şu kodu kullanabilirsiniz:
| Kod: | localStorage.removeItem("anahtar"); |
|---|
Yukarıdaki örneklerde gösterildiği gibi, localStorage ve sessionStorage kullanımı oldukça basittir. Tarayıcınızın belleğine veri kaydedip çekmek istediğinizde bu yöntemler sizin için oldukça faydalı olacaktır.
Local Storage ve Session Storage'ın Tarayıcılar Arası Desteği
JavaScript Local Storage ve Session Storage kullanımı oldukça yaygın bir hale gelmiştir. Ancak bu yöntemlerin, kullanıldıkları tüm tarayıcılarda desteklenmediği bilinmektedir.
Microsoft Edge, Internet Explorer, Safari, Opera ve Firefox gibi modern tarayıcıların son sürümleri Local Storage ve Session Storage'ı desteklerken, eski sürümlerde bu desteğin bulunmadığını unutmamalıyız. Özellikle eski sürümlere sahip Internet Explorer'da Local Storage ve Session Storage desteklenmez.
Local Storage ve Session Storage kullanırken, tarayıcının herhangi bir desteği olup olmadığını göz ardı etmemeli ve desteğin hangi sürümden itibaren başladığını dikkate alarak kullanım yapmalıyız. Bu sayede tarayıcı uyumluluğu problemlerini ortadan kaldırabilir ve kullanıcıların herhangi bir sorun yaşamadan sitemizde gezinmelerini sağlayabiliriz.
Local Storage ve Session Storage Kullanımında Dikkat Edilmesi Gerekenler
Local Storage ve Session Storage kullanımında dikkat edilmesi gereken bazı noktalar vardır. Bunlardan en önemlisi, kullanıcının verilerinin güvenliği ve doğru bir şekilde saklanmasıdır. Bu nedenle, verileri depolarken mutlaka doğru bir şekilde kaydedilmesi gerekmektedir.
Ayrıca, depolanan bilgilerin gereksiz yere yükleme süresini artırmaması için mümkün olduğunca sade ve basit tutulması önerilir. Bununla birlikte, depolama alanının sınırlı olması nedeniyle, kullanıcıların cihazlarına gereksiz veriler yüklenmemelidir.
Local Storage ve Session Storage kullanımında diğer bir önemli konu da depolanan verilerin güvenliği ve gizliliğidir. Bu nedenle, özellikle kullanıcıların özel bilgilerini tutarken, güvenilir sertifikalı siteler üzerinde depolama yapılması gerekmektedir. Ayrıca, kullanıcılar herhangi bir bilgi paylaşmadan önce, sitedeki güvenlik politikalarını okumalı ve anlamalıdırlar.
Ek olarak, Local Storage ve Session Storage kullanırken verilerin sadece konumda kalması sağlamak için düzenli olarak depolama alanının temizlenmesi gerekmektedir. Bu, kullanıcının cihazının hızını artırır ve verilerin güvenliğini sağlar.
Son olarak, depolama süresinin belirlenmesi gerekmektedir. Bu nedenle, verilerin ne kadar süre ile saklanacağı kararlaştırılmalı ve zaman aşımına uğramış verilerin otomatik olarak silinmesi sağlanmalıdır.
Tüm bu faktörlere dikkat edilerek, Local Storage ve Session Storage kullanımı güvenli ve etkili bir şekilde gerçekleştirilebilir.
Local Storage ve Session Storage Örnek Kod Örnekleri
JavaScript Local Storage ve Session Storage, web uygulamaları için önemli bir bellek kullanımı yöntemidir. Bu bellek kullanım yöntemlerini uygulamalarımızda nasıl kullanabileceğimizi gösteren örnek kodlar verelim.
Local Storage'ı kullanarak, kullanıcının tercihlerini saklayabiliriz. Aşağıdaki kod örneği, bir kullanıcının, "dil" adlı bir anahtar kelime yardımıyla tercih ettikleri dile kaydetmesini sağlar:
localStorage.setItem("dil", "Türkçe");Aşağıdaki kod örneği ise, "dil" anahtar kelimesini kullanarak kaydedilen tercihi alır:
var dilSecimi = localStorage.getItem("dil");Local Storage'da kullanabileceğiniz diğer işlevleri aşağıda listeliyoruz:
- localStorage.setItem("anahtar", "değer"): Verilen anahtar değer çiftini Local Storage'a kaydeder.
- localStorage.getItem("anahtar"): Belirtilen anahtardaki değeri getirir.
- localStorage.removeItem("anahtar"): Belirtilen anahtardaki değeri siler.
- localStorage.clear(): Local Storage'u tamamen temizler.
JavaScript Session Storage, tarayıcı penceresi açıkken geçerli olan verileri saklar. Bu nedenle, tarayıcı penceresi kapatıldığında veya yeniden açıldığında veriler kaybolur. Aşağıdaki kod örneği, kullanıcının oturum açma verilerini kaydetmek için kullanılır:
sessionStorage.setItem("kullanıcıAdı", "JohnDoe");sessionStorage.setItem("oturumID", "123456789");Aşağıdaki kod örneği ise, "kullanıcıAdı" anahtar kelimesini kullanarak kaydedilen kullanıcının adını alır:
var kullaniciAdi = sessionStorage.getItem("kullanıcıAdı");Session Storage'da kullanabileceğiniz diğer işlevleri aşağıda listeliyoruz:
- sessionStorage.setItem("anahtar", "değer"): Verilen anahtar değer çiftini Session Storage'da kaydeder.
- sessionStorage.getItem("anahtar"): Belirtilen anahtardaki değeri getirir.
- sessionStorage.removeItem("anahtar"): Belirtilen anahtardaki değeri siler.
- sessionStorage.clear(): Session Storage'u tamamen temizler.
Bu kod örneklerini ve işlevleri kullanarak, web uygulamaları için önemli verileri saklayabilir ve bunlara erişebilirsiniz.
Local Storage Kullanımı Örnekleri
JavaScript Local Storage, bir tarayıcıda, hangi bilgilerin kalıcı olarak saklanacağını belirlemenizi sağlayan bir bilgisayar veritabanıdır. Bu veritabanı sabit diskte depolanan Cookie'lerden daha iyi performans gösterir ve daha fazla depolama alanı sunar. Local Storage kullanımı, verilerin tarayıcıda depolanmasına izin verir ve tarayıcı kapandığında bile veriler kaybolmaz. Local Storage kullanmanın en yaygın nedeni, bir web uygulaması veya bir sayfa açıkken girdiği verilerin kullanıcılar tarafından hatırlanmasıdır.
Local Storage kullanımı oldukça basittir. Öncelikle Local Storage nesnesi yaratılır ve ardından kullanıcının verilerini bu nesne içinde saklamak için setItem() metodu kullanılır. Örneğin, 'username' ve 'password' gibi kullanıcı bilgileri aşağıdaki gibi görünür:
```JavaScriptlocalStorage.setItem('username', 'JohnDoe');localStorage.setItem('password', '1234');```
Bu verileri kullanmak için, Local Storage nesnesindeki getItem() metodu kullanılır:
```JavaScriptvar user = localStorage.getItem('username');var pass = localStorage.getItem('password');```
Ayrıca, Local Storage'ın diğer bir kullanımı, bir kullanıcının daha önce ziyaret ettiği sayfaların bilgisini saklamaktır. Bu, bir kullanıcının gezinme geçmişini yeniden oluşturmasına olanak sağlar. Örneğin, aşağıdaki kod blogu, son ziyaret edilen URL'yi saklar:
```JavaScriptlocalStorage.setItem('lastUrl', window.location.href);```
Ayrıca, Local Storage, bir kullanıcının tercihlerini kaydetmek için kullanılabilir. Örneğin, bir kullanıcının gece modunu tercih ettiğini varsayalım. Bu tercih, aşağıdaki gibi Local Storage'a kaydedilebilir:
```JavaScriptlocalStorage.setItem('theme', 'dark');```
Bu şekilde, kullanıcının tercihi tekrar açıldığında hatırlanabilir.
Local Storage'ın kullanımı basit ve verilerin kaydedilmesi ve kullanımı hızlıdır. Ancak, kullanımda dikkatli olunması gereken birkaç nokta vardır. Öncelikle, Local Storage temel olarak tarayıcıya güvenir. Bu nedenle, verilerinizi kaydederken dikkatli olunmalıdır. Ayrıca, veriler PHP veya diğer sunucu taraflı kodlarla değiştirilemez. Local Storage ayrıca aynı alan adında çalışan uygulamalar arasında paylaşılamaz.
Sonuç olarak, JavaScript Local Storage özellikleri, Cookie'lere göre çok daha kullanışlıdır. Local Storage, daha fazla depolama alanı sunar ve tarayıcı kapandığında bile verileri kaydetmek için kullanılabilir. Local Storage kullanım örnekleri de oldukça yaygındır. Verilerinizi ve kullanıcı tercihlerinizi kaydetmek için kullanılabilir.
Session Storage Kullanımı Örnekleri
Session Storage, geçici olarak saklanan veriler için kullanılan bir araçtır. Local Storage'a benzer ancak farklı bir kullanım amacı vardır. Session Storage, session sonlandığında veriler otomatik olarak silinir. Peki, Session Storage nasıl kullanılır?
Öncelikle, sessionStorage nesnesini kullanarak Session Storage'a erişebilirsiniz. Hepimiz, Local Storage'ı kullanırken olduğu gibi anahtar-değer çiftleri kullanarak verileri depolayabiliriz.
Aşağıdaki örnek kod, Session Storage kullanarak verileri kaydetmek ve geri almak için temel bir işlemi göstermektedir.
```// Veri depolamasessionStorage.setItem('key', 'value');
// Veri almavar data = sessionStorage.getItem('key');console.log(data);```
Session Storage'a veri ekleme, değiştirme veya silme işlemi de oldukça basittir.
```// Veri değiştirmesessionStorage.setItem('key', 'new_value');
// Veri silmesessionStorage.removeItem('key');```
Session Storage kullanımı örneklerinin bir diğer örneği, sayfalar arası veri taşımadır. Bir sayfadan başka bir sayfaya veri aktarmak için kullanılır.
```// Veri depolamasessionStorage.setItem('user', 'John Doe');
// Veri almavar user = sessionStorage.getItem('user');
// Başka bir sayfada veri almavar user = sessionStorage.getItem('user');console.log(user); // John Doe```
Yukarıdaki örnek kodda gördüğümüz gibi, kullanıcı adını depoladık ve başka bir sayfada aynı veri setini çektik. Bu özellik, form verilerini depolama veya bir sayfadan diğerine veri aktarma gibi birçok farklı kullanımı mümkün kılar.
Sonuç olarak, Session Storage kullanımı oldukça kolay ve basittir. Verileri kolayca depolayabilir ve geri alabilirsiniz. Veriler session sonlandığında otomatik olarak silineceklerdir. Bu sayede, gereksiz veri kalabalığından kurtulmanızı sağlar.