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?

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

DepolamaksınırDesteklenen veri türüSon
Yerel depolamaTarayıcı başına uygulama başına 5 MBYalnızca dize, anahtar/değer çiftleri olarakHiçbir zaman
Oturum DepolamaYalnızca sistem belleğiyle sınırlıdırYalnızca dize, anahtar/değer çiftleri olarakSekme Kapatıldıktan Sonra
Kurabiyeçerez başına en az 4096 baytmetin 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

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.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.

This site uses Akismet to reduce spam. Learn how your comment data is processed.