İstemci tarafında depolama, web uygulamaları için çok önemlidir. Sunucu tarafı depolama kadar kurşun geçirmez olmayabilir, ancak onsuz web uygulamaları birçok modern özelliği uygulayamaz. Oyunlardaki oturumlardan e-ticaret web sitelerindeki alışveriş sepetlerine kadar her türlü özellik istemci tarafında depolamaya bağlıdır.

İstemci tarafı depolama, web uygulamalarının gizlilik merkezli bir mimari uygulamasına da olanak tanır. Hassas verilerin bir kullanıcının cihazından asla çıkmamasını sağlamak için kullanabilirsiniz.

İstemci Tarafında Depolama Nedir?

Web geliştirmede, istemci tarafı depolama, web tarayıcılarının verileri depolayabileceği çeşitli yolları ifade eder. Bir uygulama daha sonra bu verileri kullanıcılara işlevsellik sağlamak için kullanabilir. İstemci tarafında depolama birkaç nedenden dolayı önemlidir:

İstemcide depolanan verilere erişim önemli ölçüde daha hızlıdır ve uygulamanız bu verilere İnternet olmadan erişebilir.

İstemci tarafında depolama, uygulamanızın her kullanıcının tercihlerini hatırlamasını kolaylaştırır.

Bazı verilerin istemcide kalıcı olarak saklanması, kullanıcı gizliliğinin korunmasını kolaylaştırır.

Tüm uygulama verilerini sunucuda depolamak, özellikle büyük ölçeklerde pahalıdır.

Web uygulamalarınızda kullanabileceğiniz birkaç farklı istemci tarafı depolama biçimi vardır.

Kurabiye

3 kurabiye yığını

Bir tarayıcı tanımlama bilgisi, bilgisayarınızda bir dizi olarak saklanan bir anahtar/değer verisi parçasıdır. Tarayıcılar, belirli bir site için tüm tanımlama bilgilerini her istekte sitenin sunucusuna gönderir. Tanımlama bilgileri, istemci tarafı depolamanın ilk (ve bir süreliğine tek) türüydü.

Bir tanımlama bilgisinin boyutuyla ilgili resmi bir sınır yoktur, ancak bireysel tarayıcılar ayarlayabileceğiniz tanımlama bilgilerinin boyutuna ve sayısına farklı sınırlar koyar. RFC 6265 Bölüm 6.1 , tarayıcıların (kullanıcı aracıları) sağlaması gereken aşağıdaki minimum çerez yeteneklerini belirtir:

Pratik kullanıcı aracısı uygulamalarının saklayabilecekleri tanımlama bilgilerinin sayısı ve boyutu konusunda sınırlamalar vardır. Genel kullanımlı kullanıcı aracıları, aşağıdaki minimum yeteneklerin her birini sağlamalıdır *Gereklidir:

Tanımlama bilgisi başına en az 4096 bayt (tanımlama bilgisinin adı, değeri ve özniteliklerinin uzunluğunun toplamı ile ölçüldüğü üzere).

Alan başına en az 50 çerez.

Toplamda en az 3000 çerez.

Çerezler tarayıcıda değişen süreler boyunca kalabilir. Bazıları bir sayfa oturumunun sonunda sona erer ve bazılarının süresi aylar sonrasına kadar uzayabilen gelişigüzel sona erme tarihlerine sahiptir.

Tarayıcılar, yeni bir sekme açtığınızda bir sayfa oturumu oluşturur ve sekmeyi veya tarayıcıyı kapattığınızda oturumu sonlandırır. Sayfayı yeniden yükler veya yenilerseniz, tarayıcı sayfa oturumunu sonlandırmaz.

Çerezler için Kullanım Örnekleri

Tanımlama bilgileri, sunucunun sık sık okuması veya değiştirmesi gereken küçük veri parçalarını depolamak için en uygun olanıdır. Neden? Niye?

Tanımlama bilgileri, tüm ağ isteklerine otomatik olarak eklenir

Tanımlama bilgileri yalnızca küçük miktarlarda dizi verisi depolayabilir.

Çerezleri, bir kullanıcıyı tanımlamak (oturum kimliği gibi), yer imi amacıyla bir sayfa ziyaretini kaydetmek veya bir oyunun yüksek puanını depolamak için kullanabilirsiniz.

Yerel depolama

Çerez gibi, localStorage da dize verilerini depolayan bir anahtar/değer deposudur. Her iki depolama türü de benzer olsa da, localStorage ve tanımlama bilgileri birkaç yönden farklılık gösterir:

• LocalStorage, JavaScript’e bağlıdır.
• localStorage’daki veriler öncelikle tarayıcıda bulunur. Tarayıcının her istek üzerine göndermesi yerine kasıtlı olarak sunucuya göndermeniz gerekir.
• LocalStorage’ın son kullanma tarihi yoktur. Bir geliştirici onu JavaScript ile silene veya kullanıcı tarayıcı deposunu temizleyene kadar istemcide kalır.

LocalStorage çok daha büyük bir depolama kapasitesine sahiptir. WHATWG spesifikasyonu sabit bir sınır belirtmez, ancak Wikipedia’ya göre başlıca tarayıcılar arasında minimum localStorage boyutu 5 MB’dir:

Tarayıcılar çerezleri 4 kilobayt ile sınırlar. Web depolama çok daha fazla depolama kapasitesi sağlar:

• Opera 10.50+, 5 MB’a izin verir
• Safari 8, 5 MB’a izin verir
• Firefox 34, 10 MB’a izin verir
• Google Chrome, kaynak başına 10 MB’a izin verir
• Internet Explorer, depolama alanı başına 10 MB’a izin verir

LocalStorage için Kullanım Örnekleri

LocalStorage, sunucunun nadiren başvurması gereken büyük miktarda veriyi depolamak için mükemmeldir. Bu, bir uygulamanın kullanıcı ayarları, tema yapılandırma ayrıntıları veya yakın zamanda doldurulmuş bir formdaki veriler olabilir. Bunun nedeni, localStorage’ın çerezlerden çok daha büyük bir depolama sınırına sahip olmasıdır, ancak verilerini sunucuya göndermek için ekstra çaba göstermeniz gerekir.

Verileri JSON olarak depolarsanız, yalnızca dizeleri depolayabilmesine rağmen, localStorage’ı kullanarak oldukça karmaşık verileri depolayabilirsiniz.

LocalStorage, XSS saldırılarına karşı savunmasızdır , bu nedenle hassas istemci verilerini içinde saklamamalısınız.

Oturum Depolama

SessionStorage, bir şey dışında localStorage ile hemen hemen aynı şekilde çalışan bir anahtar/değer deposudur . Depolanan veriler yalnızca bir sayfa oturumunun uzunluğu boyunca devam eder.

SessionStorage için Kullanım Örnekleri

SessionStorage’ı localStorage ile aynı türde verileri depolamak için kullanabilirsiniz, ancak yalnızca verilerin bir sayfa oturumunun ötesinde kalması gerekmediğinde.

IndexedDB

bir maden teçhizatı

IndexedDB, büyük miktarda yapılandırılmış veriyi depolamak için güçlü bir tarayıcı API’sidir. Verileri anahtar/değer çiftlerinde depolayan, işlemsel, nesne yönelimli bir veritabanıdır.

Daha küçük miktarlarda verilerle uğraşıyorsanız, localStorage/sessionStorage daha iyi ve daha kolay bir seçimdir. Ne yazık ki, depolama kapasiteleri ve yalnızca dizi verilerini depolayabilmeleri nedeniyle sınırlıdırlar. IndexedDB, yalnızca dosyalar/ikili veriler dahil olmak üzere farklı türde verilerin depolanmasına izin vermekle kalmaz, aynı zamanda çok daha fazla veri depolayabilir. IndexedDB ayrıca veritabanının hızlı aranmasına izin vermek için içeriğinin dizinlerini oluşturur.

IndexedDB için Kullanım Örnekleri

IndexedDB, temelde tarayıcıdaki bir NoSQL veritabanıdır ve çok büyük miktarda veri depolayabilir. 10 MB’ın üzerinde veri depolamayı gerektiren herhangi bir kullanım durumu, IndexedDB için uygundur.

Diğer tarayıcı depolama biçimlerinden farklı olarak IndexedDB, dizeleri depolamakla sınırlı değildir. IndexedDB, tüm standart JavaScript türlerinin verilerini depolayabilir. Öncelikle çevrimdışı çalışacak bir web uygulaması oluşturursanız, uygulamanın tüm verilerini depolamak için IndexedDB’yi kullanabilirsiniz.

İstemci Tarafı Depolama Esnek ve Güçlüdür

İstemci tarafı depolama terimi, uygulama verilerinin tarayıcıda depolanmasını ifade eder. İstemci tarafında depolama, çoğu modern web uygulamasının çalışması için gereklidir. Çeşitli istemci tarafı depolama türleri vardır: çerezler, local/sessionStorage ve IndexedDB.

Tüm tarayıcı depolama türlerinin kapasiteleri ve depolayabilecekleri veri türleri konusunda değişen sınırları vardır. Çerezler en sınırlı türdür, local/sessionStorage en uygun olanıdır ve IndexedDB en güçlüsüdür.