giriiş
Bir formu doldururken yanlışlıkla bir web sayfasını kapatmak sinir bozucu olabilir. Doldurduğunuz tüm verileri kaybeder ve baştan başlamak zorunda kalırsınız. Bu makalede, JavaScript'te localStorage özelliğini kullanarak verilerinizi bir tarama oturumunun ötesinde nasıl depolayacağınızı öğreneceksiniz. Bu mekanizmayı ve Window.localStorage özelliğini nasıl kullanacağınızı gösterecek ve JavaScript'te web depolamanın temellerini inceleyeceğiz.
JavaScript'te LocalStorage nedir?
localStorage, sitelerin ve JavaScript uygulamalarının anahtar-değer çiftlerini bir web tarayıcısında son kullanma tarihi olmadan depolamasına olanak tanıyan bir özelliktir. Bu, depolanan verilerin kullanıcı tarayıcıyı kapatsa veya bilgisayarı yeniden başlatsa bile saklandığı anlamına gelir.
localStorage, pencere nesnesinin tarayıcı penceresiyle etkileşime girebilen ve onu değiştirebilen küresel bir nesne haline getiren bir özelliğidir. Ayrıca, diğer pencere özellikleri ve yöntemleriyle birlikte de kullanılabilir.
Window.localStorage nedir?
localStorage mekanizması Window.localStorage özelliği aracılığıyla kullanılabilir. Window.localStorage, JavaScript'te DOM belgesi içeren bir pencereyi temsil eden Window arayüzünün bir parçasıdır.
Window arayüzü, çok çeşitli işlevler, oluşturucular, nesneler ve ad alanlarına sahiptir. 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 ne zaman kullanılır?
Basitçe söylemek gerekirse, localStorage verileri depolamak ve almak için kullanılır. localStorage ile küçük miktarlarda veri depolayabilirsiniz, ancak büyük veri kümeleri için uygun değildir. localStorage, cihazı kullanan herkes tarafından erişilebilir olduğundan, hassas bilgileri depolamak için kullanmamalısınız. Dil veya tema gibi kullanıcı tercihlerini depolamak için kullanabilirsiniz. Sık kullanılıyorsa verileri önbelleğe almak için de kullanabilirsiniz. localStorage, kullanıcı tarayıcıyı kapatsa bile kaybolmayacak form verilerini depolayabilir.
Oturum açmanızı gerektiren bir uygulamanız varsa, localStorage oturum verilerini kalıcı hale getirmek için kullanılabilir. Tarayıcıyı kapatıp tekrar açtıktan sonra bile oturum açabilirsiniz. Bunu, bu eğitimde daha sonra basit bir uygulama kullanarak göstereceğiz.
localStorage nerede saklanır?
Google Chrome'da web depolama verileri, kullanıcı profilindeki bir alt klasörde bulunan bir SQLite dosyasında saklanır. Bu alt klasör, Windows makinelerinde \AppData\Local\Google\Chrome\User Data\Default\Local Storage konumunda, macOS makinelerinde ise ~/Library/Application Support/Google/Chrome/Default/Local Storage konumunda bulunur. Firefox ise depolama nesnelerini, yine kullanıcı profili klasöründe bulunan webappsstore.sqlite adlı bir SQLite dosyasında saklar.
Web Depolama API'sine Giriş
localStorage, Web Depolama API'sindeki iki mekanizmadan biridir; diğeri ise sessionStorage'dır. Web Depolama API'si, tarayıcıların anahtar-değer çiftlerini depolamasını sağlayan bir mekanizma kümesidir. Çerez kullanmaktan çok daha sezgisel olacak şekilde tasarlanmıştır.
Anahtar-değer çiftleri, sayfa yüklenirken bozulmadan kalmaları ve her zaman dize olmaları dışında nesnelere benzeyen depolama nesnelerini temsil eder. Bu değerlere, bir nesneymiş gibi veya getItem() yöntemini kullanarak erişebilirsiniz (bununla ilgili daha fazla bilgi aşağıda).
sessionStorage ve localStorage karşılaştırması
Hem sessionStorage hem de localStorage, sayfa oturumu süresince kullanılabilen her kaynak için ayrı bir depolama alanına sahiptir. Aralarındaki temel fark, sessionStorage'ın yalnızca tek bir depolama alanı tutmasıdır. Aynı zamanda, tarayıcı açıkken (sayfa yeniden yüklendiğinde veya yenilendiğinde de dahil olmak üzere), localStorage tarayıcı kapatıldıktan sonra da veri depolamaya devam eder.
localStorage, süresi dolmayan verileri depolarken, sessionStorage yalnızca bir oturuma ait verileri depolar. Gizli bir tarama oturumunda yüklenen localStorage verilerinin, son özel sekme kapatıldıktan sonra silindiğini unutmamak önemlidir. setItem SessionStorage yöntemi, verilerin geçici olarak depolanması gerektiğinde kullanışlıdır ve geçerli oturumun ötesinde veri kalıcılığının gerekli olmadığı durumlarda kullanılmalıdır.
SessionStorage, genellikle localStorage'a kıyasla daha düşük depolama sınırlarına sahiptir ve kaynak başına birkaç megabaytla sınırlıdır. Bu, kullanıcı oturumu sırasında çok fazla tarayıcı kaynağı tüketmeden geçici verileri depolamak için uygundur.
LocalStorage ise, genellikle kaynak başına 5 ila 10 MB arasında değişen daha büyük bir depolama kapasitesi sunar. Birden fazla oturumda kalıcı olması gereken büyük miktarda veriyi depolamak için uygundur.
LocalStorage'ın avantajları ve dezavantajları
JavaScript'te localStorage, istemci tarafındaki verileri depolamak için önemli bir araçtır. Ancak, göz önünde bulundurmanız gereken bazı avantajları ve dezavantajları vardır.
Faydalar
LocalStorage'ın ilk avantajı, daha önce birkaç kez bahsettiğimiz gibi, depolanan verilerin geçerliliğini yitirmemesidir. Verilere çevrimdışı olarak erişebilirsiniz ve localStorage, internet bağlantısı olmadan da kullanılabilen verileri depolar.
Verileri localStorage ile depolamak, çerezlerle depolamaktan daha güvenlidir ve verileriniz üzerinde daha fazla kontrole sahip olursunuz. Son olarak, localStorage çerezlere kıyasla daha büyük bir depolama kapasitesine sahiptir. Çerezler yalnızca dört kilobayt veri depolayabilirken, LocalStorage beş megabayta kadar veri depolayabilir.
Dezavantajları
localStorage eşzamanlıdır, yani her işlem yalnızca birbiri ardına yürütülür. Bu, küçük veri kümeleri için minimum sorun yaratır, ancak verileriniz büyüdükçe büyük bir sorun haline gelebilir.
LocalStorage, çerezlerden daha güvenli olsa da, hassas verileri depolamak için kullanmamalısınız. Kullanıcının cihazına erişimi olan herkes, localStorage ile depolanan verilere erişebilir. Ayrıca, localStorage yalnızca dizeleri depolayabilir, bu nedenle başka veri türlerini depolamak istiyorsanız, bunları dizelere dönüştürmeniz gerekir. Son olarak, localStorage ile çok fazla veri depolamak uygulamanızı yavaşlatabilir.
LocalStorage nasıl çalışır?
Daha önce birçok kez duymuşsunuzdur: localStorage verileri depolar. Eğer veri depoluyorsanız, daha sonra bunlara erişmeniz gerekebilir. Bu bölümde, localStorage'ın tam olarak nasıl çalıştığına bakacağız. İşte nasıl çalıştığına dair bir özet:
- setItem(): anahtarı ve değeri localStorage'a ekler
- getItem(): localStorage'dan öğeleri alır/alır
- removeItem(): Bir öğeyi localStorage'dan kaldırır
- clear(): localStorage'daki tüm verileri temizler
- key(): yerel anahtarı almak için bir sayı depolar
setItem() ile veri kaydetme
setItem() yöntemi, değerleri localStorage'da depolamanıza olanak tanır. İki parametre alır: bir anahtar ve bir değer. Anahtara daha sonra ilişkili değeri almak için başvurulabilir. İşte nasıl görünmesi gerektiği:
localStorage.setItem('name', 'Obaseki Nosa');
Yukarıdaki kodda, name'in anahtar, Obaseki Nosa'nın ise değer olduğunu görebilirsiniz. Daha önce de belirttiğimiz gibi, localStorage yalnızca dizeleri depolayabilir. Dizileri veya nesneleri localStorage'da depolamak için bunları dizelere dönüştürmeniz gerekir.
Bunu yapmak için, setItem()'a geçirmeden önce JSON.stringify metodunu şu şekilde kullanırız:
const userArray = ["Obaseki",25]
localStorage.setItem('user', JSON.stringify(userArray));getItem() ile bilgi alma
getItem(), tarayıcının localStorage nesnesinde depolanan verilere erişmenizi sağlar. Bu yöntem yalnızca bir parametre, yani anahtar kabul eder ve değeri bir dize olarak döndürür:
localStorage.getItem('name');
Bu, "Obaseki Nosa" değerine sahip bir dize döndürür. Belirtilen anahtar localStorage'da mevcut değilse, null döndürür. Bir dizi söz konusu olduğunda, JSON dizesini bir JavaScript nesnesine dönüştüren JSON.parse() yöntemini kullanırız:
JSON.parse(localStorage.getItem('user'));
Yukarıda oluşturduğumuz diziyi kullanarak localStorage'dan şu şekilde alabiliriz:
const userData = JSON.parse(localStorage.getItem('user'));
console.log(userData);Bu yöntem [“Obaseki”, 25] dizisini döndürür. Web sayfasını inceleyip konsolda şu şekilde bulabilirsiniz:
Bu görsel Firefox'tan alınmıştır, bu nedenle diğer tarayıcılarda biraz farklı görünecektir. Bunu localStorage'da saklanmayan başka bir diziyle karşılaştıralım:
const userArray2 = ["Oscar", 27];
console.log(userArray2);Şimdi konsolda aşağıda gösterildiği gibi iki dizimiz var:
Normalde, bunları kod düzenleyicinizde yorum satırına eklerseniz konsoldan kaybolmaları gerekir. Ancak localStorage ile depolanan her şey kalacaktır. İşte bir örnek:
removeItem() ile verileri kaldırma
LocalStorage'dan bir öğeyi kaldırmak için removeItem() yöntemini kullanacaksınız. Anahtar adı iletildiğinde, removeItem() yöntemi mevcut anahtarı bellekten kaldırır. Belirtilen anahtarla ilişkili bir öğe yoksa, bu yöntem hiçbir şey yapmaz. Kod şu şekildedir:
.localStorage.removeItem('name');
localStorage'daki her şey nasıl silinir: clear()
localStorage'daki her şeyi silmek için clear() metodunu kullanırsınız. Bu metot çağrıldığında, ilgili alan adına ait tüm kayıtların depolama alanının tamamını temizler. Herhangi bir parametre almaz. Aşağıdaki kodu kullanın:
localStorage.clear();
Bir anahtarın adı nasıl alınır: key()
key() yöntemi, anahtarlar arasında döngü yapmanız gerektiğinde ancak yine de anahtar adını almak için localStorage'a bir sayı veya liste aktarabilmeniz gerektiğinde kullanışlıdır. İşte şöyle görünür:
localStorage.key(index);İndeks parametresi, ismini almak istediğiniz anahtarın sıfırdan başlayan dizinini temsil eder.
localStorage ve çerezler
Hem LocalStorage hem de çerezler, istemci tarafındaki verileri depolamak için kullanılır. Daha önce de belirttiğimiz gibi, çerezler en fazla dört kilobayt veri depolayabilir; bu da LocalStorage'ın beş megabaytlık depolama kapasitesinden önemli ölçüde daha azdır.
Çerezler her HTTP isteğinde sunucuya otomatik olarak gönderilir, ancak localStorage kullanıcının cihazında yerel olarak kalır. Bu, web performansını artırabilir ve sunucuyla veri paylaşmadığı için ağ trafiğini artırmaz.
Gördüğümüz gibi, localStorage ile depoladığınız veriler sona ermez. Siz manuel olarak silmediğiniz sürece orada süresiz olarak kalırlar. Çerezler ise belirli bir süre sonra veya tarayıcı kapatıldığında sona erecek şekilde ayarlanabilir. Çerezler genellikle kullanıcı tercihleri ve oturum açma/kimlik doğrulama bilgileri gibi verileri depolar. Bu verilere tüm tarayıcı sekmelerinden ve pencerelerinden erişilebilir. Ancak localStorage, yalnızca belirli bir protokol veya etki alanında erişilebilen verileri depolar.
Tarayıcı localStorage desteği
Bir web depolama türü olan localStorage, bir HTML5 spesifikasyonudur. Internet Explorer v8 dahil olmak üzere başlıca tarayıcılar tarafından desteklenir. Tarayıcının localStorage'ı destekleyip desteklemediğini kontrol etmek için aşağıdaki kod parçacığını kullanabilirsiniz:
if (typeof(Storage) !== "undefined") {
// Code for localStorage
} else {
// No web storage Support.
}localStorage'da verileri yönetmeye yönelik gelişmiş teknikler
Şimdi, yerel depolamadaki verileri yönetmek için bazı gelişmiş teknikleri inceleyeceğiz. Anahtarları etkili bir şekilde nasıl sileceğimizi, nesneleri depolamak ve düzenlemek için en iyi uygulamaları nasıl uygulayacağımızı ve karmaşık veriler için JSON ayrıştırma ve dizeleştirmeyi nasıl kullanacağımızı ele alacağız.
Etkili anahtar çıkarma
localStorage'da depolanan nesnelerden anahtarları etkili bir şekilde kaldırmak, özellikle verilerin sık sık güncellendiği veya silindiği bir uygulama oluşturuyorsanız, depolama alanını optimize etmek için çok önemlidir. Gereksiz anahtarları kaldırmak, LocalStorage'ın işe yaramaz verilerle kümelenmesini önlemeye yardımcı olur.
localStorage'daki bir nesneden bir anahtarı etkili bir şekilde kaldırmak için, anahtarı kullanarak nesneyi alabilir, istenen özelliği kaldırabilir ve ardından güncellenmiş nesneyi localStorage'a döndürebilirsiniz. Bu, gereksiz veri işleme ve depolama yükünü en aza indirir:
// Example of efficient key removal
let storedData = JSON.parse(localStorage.getItem('key'));
delete storedData.propertyToRemove;
localStorage.setItem('key', JSON.stringify(storedData));Nesneleri kaydedin ve düzenleyin
JSON ayrıştırma ve dizeleştirme, localStorage'da veri depolarken ve alırken karmaşık veri yapılarını yönetmek için güçlü tekniklerdir. JavaScript nesneleri ve JSON dizeleri arasında kolay dönüşüm sağlayarak verimli veri yönetimi ve işlenmesine olanak tanırlar.
Nesneler veya diziler gibi karmaşık veri yapılarını localStorage'da saklarken, bunları localStorage'a yerleştirmeden önce JSON.stringify() kullanarak dizeleştirmek önemlidir. Bu, JavaScript nesnesini bir JSON dizesine dönüştürür ve bu dize daha sonra anahtar-değer çifti olarak saklanabilir:
// Storing an object in LocalStorage
let dataObject = { key: 'value' };
localStorage.setItem('objectKey', JSON.stringify(dataObject));
// Retrieving and parsing the object from LocalStorage
let retrievedObject = JSON.parse(localStorage.getItem('objectKey'));İç içe geçmiş nesneler veya dizilerle çalışırken, veri yapısı bütünlüğünü korumak için tüm iç içe geçmiş nesnelerin dizeleştirildiğinden ve ayrıştırıldığından emin olun:
// Storing and retrieving nested objects in LocalStorage
let nestedObject = { key1: 'value1', key2: { nestedKey: 'nestedValue' } };
localStorage.setItem('nestedObject', JSON.stringify(nestedObject));
let retrievedNestedObject = JSON.parse(localStorage.getItem('nestedObject'));Sonuç
Bu makalede, çerezlere güvenmeden veri depolamanın ve almanın basit ve etkili bir yolu olarak JavaScript'teki LocalStorage'ın yeteneklerini inceledik. localStorage'ın nasıl ve ne zaman kullanılacağını, ayrıca localStorage'daki öğelerin nasıl depolanacağını, alınacağını ve silineceğini açıkladık. Çalışan bir örnek üzerinden LocalStorage'ı eylem halinde gösterdik ve çerezlerle karşılaştırdık.
Bu yazıda, localStorage'ı nasıl ve ne zaman kullanacağınızı öğrendiniz. localStorage'da öğelerin nasıl depolanacağını, alınacağını ve silineceğini açıkladık. Ayrıca, LocalStorage'ın pratik bir senaryoda nasıl çalıştığını görmek için çalışan bir uygulama oluşturduk. Son olarak, bunu çerezlerle karşılaştırdık.
Yani, kullanımı kolay, geniş tarayıcı desteğine sahip harika bir araçla doğru yerdesiniz.
