Local Storage Nedir? Local Storage Nasıl Kullanılır? Tam Döküman

Bu yazıda, localStorage mekanizmasını ve Window.localStorage özelliğini nasıl kullanacağınızı göstereceğiz ve JavaScript’te web depolamanın temellerini gözden geçireceğiz.

Web Storage API’si nedir?

Web Storage API’si, tarayıcıların anahtar/değer çiftlerini saklamasını sağlayan bir dizi mekanizmadır. Çerezleri kullanmaktan çok daha sezgisel olacak şekilde tasarlanmıştır.

Anahtar/değer çiftleri, sayfa yüklemeleri sırasında bozulmadan kalmaları ve her zaman dize olmaları dışında nesnelere benzeyen depolama nesnelerini temsil eder. Bu değerlere bir nesne gibi veya getItem() yöntemini kullanarak erişebilirsiniz.

sessionStorage ve localStorage arasındaki fark nedir?

Web Storage API’si iki mekanizmadan oluşur: sessionStorage ve localStorage. Hem sessionStorage hem de localStorage, sayfa oturumu süresince her kullanılabilir kaynak için ayrı bir depolama alanı sağlar.

sessionStorage ve localStorage arasındaki temel fark, sessionStorage’ın yalnızca tarayıcı açıkken (sayfa yeniden yüklendiğinde veya geri yüklendiğinde dahil) bir depolama alanı tutması ve localStorage’ın tarayıcı kapatıldıktan sonra veri depolamaya devam etmesidir.

Başka bir deyişle, sayfa kapatıldığında sessionStorage’da depolanan veriler temizlenirken, localStorage’da depolanan verilerin süresi dolmaz.

Bu eğitimde, JavaScript’te localStorage’ın nasıl kullanılacağına odaklanacağız.

JavaScript’te localStorage nedir?

localStorage, JavaScript sitelerinin ve uygulamalarının anahtar/değer çiftlerini son kullanma tarihi olmadan bir web tarayıcısında kaydetmesine olanak tanıyan bir özelliktir. Bu, tarayıcıda saklanan verilerin tarayıcı penceresi kapatıldıktan sonra bile devam edeceği anlamına gelir.

localStorage nerede saklanır?

Google Chrome‘da web depolama verileri, kullanıcının profilindeki bir alt klasördeki bir SQLite dosyasına kaydedilir. Alt klasör, Windows makinelerinde \AppData\Local\Google\Chrome\User Data\Default\Local Storage ve macOS‘ta ~/Library/Application Support/Google/Chrome/Default/Local Storage konumunda bulunur.

Firefox, depolama nesnelerini, kullanıcının profil klasöründe de bulunan webappsstore.sqlite adlı bir SQLite dosyasına kaydeder.

Window.localStorage nedir?

localStorage mekanizması, Window.localStorage özelliği aracılığıyla kullanılabilir. Window.localStorage, DOM belgesi içeren bir pencereyi temsil eden JavaScript’teki Window arabiriminin bir parçasıdır.

Window arabirimi, çok çeşitli işlevler, oluşturucular, nesneler ve ad alanları içerir. Window.localStorage, yalnızca onu oluşturan kaynak tarafından erişilebilen verileri depolamak için kullanılan yerel depolama nesnesine bir başvuru döndüren salt okunur bir özelliktir.

localStorage nasıl çalışır?

Web uygulamalarınızda localStorage’ı kullanmak için seçebileceğiniz beş yöntem vardır:

• setItem(): localStorage’a anahtar ve değer ekler
• getItem(): localStorage’dan öğeleri okur
• removeItem(): Bir öğeyi localStorage’dan anahtarla kaldırır
• clear(): Tüm localStorage’ı temizler
• key(): localStorage’ın anahtarını almak için bir sayı geçer

setItem(): LocalStorage’da değerler nasıl saklanır

Adından da anlaşılacağı gibi, bu yöntem, değerleri localStorage nesnesinde saklamanıza olanak tanır.

İki parametre alır: bir anahtar ve bir değer. Anahtara daha sonra ekli değeri getirmek için başvurulabilir.

Anahtar “isim” ve içindeki değer “Hayri KOÇ” verisidir. Yeri gelmişken localStorage’ın yalnızca metinleri depolayabileceğini unutmayın.

Dizileri veya nesneleri saklamak için onları dizelere dönüştürmeniz gerekir.

Bunu yapmak için setItem()‘e geçmeden önce JSON.stringify() yöntemini kullanırız.

getItem(): localStorage’dan öğeler nasıl okunur

öğeleri localStorage‘dan almak için getItem() yöntemini kullanın. getItem(), tarayıcının localStorage nesnesinde depolanan verilere erişmenizi sağlar.

getItem(), anahtar olan yalnızca bir parametreyi kabul eder ve değeri bir dize olarak döndürür.

Bir kullanıcı anahtarını almak için:

Örnek içinde görecek olursak;

Console çıktısı şu şekilde olacaktır:

Bu değeri kullanmak için onu tekrar bir nesneye dönüştürmeniz gerekir.

Bunu yapmak için, bir JSON dizesini bir JavaScript nesnesine dönüştüren JSON.parse() yöntemini kullanırız.

Çıktı:

removeItem(): localStorage oturumları nasıl silinir

Yerel depolama oturumlarını silmek için removeItem() yöntemini kullanın.

Bir anahtar adı iletildiğinde, removeItem() yöntemi, varsa o anahtarı depodan kaldırır. Verilen anahtarla ilişkili herhangi bir öğe yoksa, bu yöntem hiçbir şey yapmaz.

clear(): localStorage’daki tüm öğeler nasıl silinir

localStorage’daki tüm öğeleri silmek için clear() yöntemini kullanın.

Bu yöntem, çağrıldığında, o etki alanı için tüm kayıtların tüm deposunu temizler. Herhangi bir parametre almaz.

key(): localStorage’da bir anahtarın adı nasıl alınır

key() yöntemi, anahtarlar arasında geçiş yapmanız gereken durumlarda kullanışlıdır ve anahtarın adını almak için localStorage’a bir sayı veya dizin iletmenize olanak tanır.

localStorage tarayıcı desteği

Bir web depolama türü olarak localStorage, bir HTML5 özelliğidir. IE8 dahil olmak üzere büyük tarayıcılar tarafından desteklenir. Tarayıcının localStorage’ı desteklediğinden emin olmak için aşağıdaki parçacığı kullanarak kontrol edebilirsiniz:

localStorage örnek uygulama

Yapılacak listesi uygulaması localStorage için basit ama işlevsel bir çözüm sunacaktır. localStorage konusunu öğrenmenize yardımcı olacağını düşünüyorum.

Örnek Uygualama (Yapılacak Listesi)

localStorage sınırlamaları

localStorage’ı kullanmak ne kadar kolaysa, kötüye kullanmak da o kadar kolaydır.

Aşağıdakiler sınırlamalardır ve ayrıca localStorage’ı KULLANMAMA yollarıdır:

• Hassas kullanıcı bilgilerini localStorage’da saklamayın
• Bilgiler yalnızca tarayıcıda depolandığından, sunucu tabanlı bir veritabanının yerini tutmaz.
• localStorage, tüm büyük tarayıcılarda 5 MB ile sınırlıdır
• localStorage, herhangi bir veri korumasına sahip olmadığı ve web sayfanızdaki herhangi bir kodla erişilebildiği için oldukça güvensizdir.
• localStorage eşzamanlıdır, yani çağrılan her işlem yalnızca birbiri ardına yürütülür