İstemci tarafı 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ını da sağlar. Hassas verilerin bir kullanıcının cihazından asla çıkmamasını sağlamak için bunu kullanabilirsiniz.

İstemci Tarafı 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ı depolama, birkaç nedenden dolayı kritiktir:

  • İstemcide depolanan verilere erişim çok daha hızlıdır ve uygulamanız buna İnternet olmadan erişebilir.
  • İstemci tarafı depolama, uygulamanızın her kullanıcının tercihlerini hatırlamasını kolaylaştırır.
    • instagram viewer
  • 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

Tarayıcı tanımlama bilgisi, bilgisayarınızda bir dize olarak depolanan bir anahtar/değer verisidir. Tarayıcılar, her istekte belirli bir site için tüm çerezleri sitenin sunucusuna gönderir. Çerezler, istemci tarafında depolamanın ilk (ve bir süreliğine tek) türüydü.

Bir çerezin boyutuna ilişkin resmi bir sınır yoktur, ancak bireysel tarayıcılar, ayarlayabileceğiniz çerezlerin boyutuna ve sayısına farklı sınırlar koyar. bu RFC 6265 Bölüm 6.1 tarayıcıların (kullanıcı aracıları) sağlaması gereken aşağıdaki minimum tanımlama bilgisi 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:

  • Çerez başına en az 4096 bayt (tanımlama bilgisinin adının, değerinin ve özniteliklerinin uzunluğunun toplamı ile ölçüldüğü gibi).
  • Alan başına en az 50 çerez.
  • Toplamda en az 3000 çerez.

Çerezler, tarayıcıda değişen sürelerde kalabilir. Bazıları bir sayfa oturumunun sonunda sona erer ve bazılarının geleceğe aylar kadar uzayabilen keyfi sona erme tarihleri ​​vardır.

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

Çerezler için Kullanım Durumları

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

  • Çerezler, tüm ağ isteklerine otomatik olarak eklenir
  • Tanımlama bilgileri, yalnızca küçük miktarlarda dize verisi depolayabilir.

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ı saklamak için tanımlama bilgilerini kullanabilirsiniz.

Yerel depolama

Bir tanımlama bilgisi gibi, localStorage, dize verilerini depolayan bir anahtar/değer deposudur. Her iki depolama türü de benzer olsa da, localStorage ve tanımlama bilgileri çeşitli şekillerde 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 istekte göndermesi yerine kasıtlı olarak sunucuya göndermeniz gerekir.
  • LocalStorage'ın son kullanma tarihi yoktur. Bir geliştirici onu JavaScript ile silinceye veya kullanıcı tarayıcı deposunu temizleyene kadar istemcide kalır.
  • LocalStorage çok daha büyük bir depolama kapasitesine sahiptir. bu WHATWG özelliği kesin bir sınır belirtmez, ancak buna göre Vikipedi, büyük 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'ye 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 tanımlama bilgilerine göre çok daha büyük bir depolama sınırına sahip olmasıdır, ancak verilerini sunucuya göndermek için ekstra çaba harcamanız gerekir.

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

LocalStorage şunlara karşı savunmasızdır: XSS saldırıları, bu nedenle içinde hassas müşteri verilerini saklamamalısınız.

OturumDepolama

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

SessionStorage için Kullanım Örnekleri

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

IndexedDB

IndexedDB, büyük miktarda yapılandırılmış veri 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 az miktarda veriyle uğraşıyorsanız localStorage/sessionStorage daha iyi ve daha kolay bir seçimdir. Ne yazık ki, depolama kapasiteleri ve yalnızca dize verilerini depolayabilmeleri gerçeğiyle sınırlıdırlar. IndexedDB yalnızca dosyalar/ikili veriler dahil olmak üzere farklı veri türlerinin 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 aslında tarayıcıdaki bir NoSQL veritabanıdır ve çok büyük miktarda veri depolayabilir. 10 MB'den fazla 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 Taraflı Depolama Esnek ve Güçlüdür

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

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