Web Depolama API’si nasıl kullanılır?
Bu yazıda, daha kesin olmak için Yerel Depolama, Oturum Depolama ve Çerezler gibi farklı web depolama türlerine bakacağız. Tarayıcıda veri depolamak oldukça basit bir iştir, ancak bunu yapmanın üç farklı yolu vardır ve özel kullanım durumunuz için hangi depolama seçeneğinin en iyi olduğunu bilmek zor olabilir. Size en uygun seçeneği tam olarak seçebilmeniz için, bir kullanıcının tarayıcısında veri depolamanın üç farklı yolunu da ele alacağım.
İçindekiler
- Web Depolama Nedir?
- Çerezler, Yerel Depolama ve Oturum Depolaması Ne İçin Kullanılır?
- Karşılaştırma
- Yerel depolama
- Oturum Depolama
- Kurabiye
- Çözüm
Web Depolama Nedir?
Web Depolama, HTML5’in harika özelliklerinden biridir. Web Depolama özelliği ile web uygulamaları, istemci tarafında tarayıcı içinde yerel olarak veri depolayabilir. Verileri tarayıcıda anahtar/değer çifti şeklinde depolar. Web Depolama bazen DOM depolaması olarak da bilinir.
Çerezler, Yerel Depolama ve Oturum Depolaması Ne İçin Kullanılır?
Çeşitli depolama seçenekleri arasındaki birçok farklılığa dalmadan önce, ne için kullanıldıkları hakkında konuşmam gerekiyor. Her üç depolama yöntemi de, sitenizdeki yeni sayfalara gittikten sonra bile erişilebilen kullanıcının tarayıcısında bilgi depolamak için kullanılır. Bu veriler aynı zamanda kullanıcının tam olarak kullandıkları tarayıcıya kaydedilir, bu nedenle sitenizi Chrome’da açarlarsa, bilgileri yalnızca o anda kullandıkları cihazdaki Chrome tarayıcılarına kaydeder. Bu, sitenizi daha sonra farklı bir tarayıcıda açarlarsa, verilerin artık orada olmayacağı anlamına gelir. Şimdi her seçenek arasındaki birçok farklılığa geçelim.
Karşılaştırmak
| Depolamak | sınır | Desteklenen veri türü | Son |
|---|---|---|---|
| Yerel depolama | Tarayıcı başına uygulama başına 5 MB | Yalnızca dize, anahtar/değer çiftleri olarak | Hiçbir zaman |
| Oturum Depolama | Yalnızca sistem belleğiyle sınırlıdır | Yalnızca dize, anahtar/değer çiftleri olarak | Sekme Kapatıldıktan Sonra |
| Kurabiye | çerez başına en az 4096 bayt | metin dosyası (emin değilim) | Son Kullanma Tarihi vardır (manuel) |
Yerel depolama
Yerel depolama, verileri uzun süre depolayan bir web depolama biçimidir. Bu bir gün, bir hafta, hatta bir yıl olabilir. Bu, geliştiricinin tercihine bağlıdır. Yerel depolamanın yalnızca dizeleri sakladığını unutmamak önemlidir, bu nedenle nesneleri, listeleri veya dizileri depolamak istiyorsanız bunları kullanarak bir dizeye dönüştürmeniz gerekir JSON.stringify().
Veri depolama
Yerel depolamayı kullanarak verileri ayarlamak için setItemBu işlevi iki dize parametresi alır. İlk parametre addır ve ikinci parametre bu adla ilişkilendirilecek değerdir. Bunu bir JSON nesnesindeki bir anahtar değer çiftine çok benzer şekilde düşünebilirsiniz.
localStorage.setItem("day", "monday");
Aynen böyle, bunun içinde anahtar/değer çiftini saklayabilirsiniz. Yalnızca bu dizeleri depolayamazsınız. Javascript dizisini veya nesnesini dizeler olarak saklayabilirsiniz, bakalım nasıl –
// Storing Object
const usesInfo = {
name: "John",
age: 34,
};
localStorage.setItem("user-info", JSON.stringify(userInfo));
// Storing Array
const languages = ["Python", "React", "Javascript", "Go"];
localStorage.setItem("languages", JSON.stringify(languages));
JSON.stringify()Yöntem, bir JSON dizeye bir JavaScript nesne veya değerine dönüştürür
Verileri Oku
Yerel depolamadan veri almak için getItemyöntemi çağırmak kadar kolaydır . Bu yöntem, anahtar değer çiftinin adı olan tek bir parametre alır ve değeri döndürür.
Bir önceki bölümde eklediğimiz verileri okuyoruz
// Reading String
const name = localStorage.getItem("name");
// Reading Object
const userInfo = JSON.parse(localStorage.getItem("user-info"));
// Reading Array
const languages = JSON.parse(localStorage.getItem("languages"));
JSON.parse()Yöntem dizesi tarafından açıklandığı gibi, JavaScript değer veya nesne oluşturarak, JSON dize ayrıştırır
O nullanahtarı bulamazsa geri döner.
Verileri Kaldırma
Önceki örneklerde olduğu gibi, verileri yerel depolamadan kaldırmak, tek bir yöntemi çağırmak kadar kolaydır. Bu yöntem removeItemyöntemdir ve kaldırılacak anahtar değer çiftinin adı olan tek bir parametre alır.
localStorage.removeItem("name");
Oturum Depolama
Bir tarayıcıda veri depolamak söz konusu olduğunda, oturum depolama popüler bir seçimdir. Geliştiricilerin farklı değerleri kaydetmesini ve almasını sağlar. Yerel depolamanın aksine, oturum depolaması yalnızca belirli bir oturum için verileri tutar. Kullanıcı tarayıcı penceresini kapattığında veriler temizlenir.
Veri depolama
Oturum Depolama, yerel depolama ile aynı kavramlar üzerinde çalışır. sadece sessionStoragenesneyi kullanmamız gerekiyor –
// Storing Key-Value Pairs
sessionStorage.setItem("day", "monday");
// Storing Object
const userInfo = {
name: "John",
age: 34,
};
sessionStorage.setItem("user-info", JSON.stringify(userInfo));
// Storing Array
const languages = ["Python", "React", "Javascript", "Go"];
sessionStorage.setItem("languages", JSON.stringify(languages));
Verileri Oku
Verileri okumak da yerel depolama ile aynıdır.
// Reading String
const name = sessionStorage.getItem("name");
// Reading Object
const userInfo = JSON.parse(sessionStorage.getItem("user-info"));
// Reading Array
const languages = JSON.parse(sessionStorage.getItem("languages"));
Verileri Kaldırma
Verileri kaldırmak da yerel depolama ile aynıdır.
sessionStorage.removeItem("name");
Kurabiye
Çerez, genellikle web tarayıcınızda depolanan küçük bir metin dosyasıdır. Başlangıçta, ziyaret ettiğiniz web siteleri hakkında bilgi depolamak için bir çerez kullanıldı. Ancak teknolojideki gelişmelerle birlikte, bir çerez web aktivitelerinizi izleyebilir ve içerik tercihlerinizi alabilir.
Veri depolama
Verileri çerezlerde saklamak için. document.cookieNesneye erişmeniz ve bunu çerezinize ayarlamanız gerekir. Bunu yapmak için tek yapmanız gereken document.cookie, ad ve değerin eşittir işaretiyle ayrıldığı bir dizeye ayarlamaktır .
document.cookie = "name=Smith";
Bu, ad nameve değere sahip bir çerez oluşturacaktır Smith, ancak varsayılan sona erme tarihi geçmişte olduğundan bu çerezin süresi dolacaktır. Son kullanma tarihini manuel olarak ayarlamak için expiresanahtara bir UTC tarih değeri iletmemiz gerekir . expiresAnahtarı nameanahtarımızdan noktalı virgülle ayırdığımızdan da emin olmamız gerekiyor ;.
document.cookie = `name=Smith; expires=${new Date(9999, 0, 1).toUTCString()}`;
Bu, son kullanma tarihi 01/01/9999 olan bir tanımlama bilgisi oluşturur; bu, esasen süresi asla dolmayan bir tanımlama bilgisi oluşturmaya benzer.
Verileri Oku
Tek bir çerez almanın bir yolu olmadığından çerezler biraz daha zordur. Çerezleri almanın tek yolu, document.cookienesneye erişerek tüm çerezleri bir kerede almaktır .
const cookie = document.cookie; // "name=Smith; username=John";
dizgeyi varsayılan olarak döndürür, ancak bildiğiniz gibi onu kodumuzda kullanmak biraz zordur, bu nedenle çerezleri alacak ve nesne olarak dönecek bir işlev oluşturabiliriz. Bakalım kodda nasıl görünecek
// Covert String to Object
function cookiesToObject(cookie) {
var output = {};
cookie.split(/\s*;\s*/).forEach(function (pair) {
pair = pair.split(/\s*=\s*/);
output[pair[0]] = pair.splice(1).join("=");
});
return output;
}
// Getting Cookie Object
const cookieObject = cookiesToObject(document.cookie);
Kaynak – Yığın Taşması
Verileri Kaldırma
Her zamanki gibi çerezler biraz daha zordur. Bir çerezi kaldırmak için çerezi yeniden ayarlamanız, ancak ona boş bir değer ve geçmiş bir son kullanma tarihi vermeniz gerekir.
document.cookie = "name=; expires=Thu, 01 Jan 1980 00:00:00 GMT";
Çözüm
Yerel depolama, oturum depolama ve tanımlama bilgileri benzer olsa da, hepsine benzersiz kullanım durumları veren aralarında küçük farklılıklar vardır. Yerel depolama ve oturum depolama ile çalışmak çerezlerden çok daha kolay olduğundan, özellikle sunucudaki verilere erişmeniz gerekmedikçe, her zaman oturum depolama veya yerel depolama kullanmanızı öneririm.
Makalenin orjinal kaynağını bu linkten okuyabilirsiniz.
