Bu sayfa, Cloud Translation API ile çevrilmiştir.

Web için depolama alanı

Tarayıcıda veri depolamak için birçok farklı seçenek vardır. İhtiyaçlarınız için en uygunu hangisi?

Pete LePage

İnternet bağlantıları kesintisiz olabilir veya hareket halindeyken mevcut olmayabilir. Bu nedenle çevrimdışı destek ve güvenilir performans Google Analytics 4'te ortak progresif web uygulamaları. Kusursuz kablosuz bağlantıda önbelleğe almanın ve diğer depolama tekniklerinin mantıklı bir şekilde kullanılması, kullanıcı deneyimini önemli ölçüde iyileştiriyor. Önbelleğe almanın çeşitli yolları vardır statik uygulama kaynaklarınız (HTML, JavaScript, CSS, resimler vb.) ve verileri (kullanıcı verileri, haber makaleleri vb.) için de geçerlidir. Peki en iyi çözüm hangisidir? Nasıl? ne kadar depolayabilirsin? Oyunun atılmasını nasıl önlüyorsunuz?

Ne kullanmalıyım?

Kaynakların depolanmasıyla ilgili genel bir öneri aşağıda verilmiştir:

Uygulamanızı ve dosya tabanlı içeriğinizi yüklemek için gereken ağ kaynakları Önbellek Depolama API'sini ( Service Worker'lar için geçerlidir.
Diğer veriler için IndexedDB kullanın ( sarmalayıcı taahhüt olarak nitelendirilir.

IndexedDB ve Cache Storage API, her modern tarayıcıda desteklenir. Her ikisi de eşzamansızdır ve ana iş parçacığını engellemez. Onlar window nesnesinden, web çalışanlarından ve hizmet çalışanlarından erişilebilir. ve bunları kodunuzun herhangi bir yerinde kolayca kullanabilirsiniz.

Diğer depolama mekanizmaları ne olacak?

Tarayıcıda kullanabileceğiniz başka depolama mekanizmaları da vardır, ancak bunlar sınırlı kullanımı vardır ve önemli performans sorunlarına neden olabilir.

SessionStorage sekmeye özeldir ve zaman aşımına uğrar. Bu, küçük miktarda oturum depolamak için yararlı olabilir IndexedDB anahtarı gibi belirli bilgileri içerir. Şunlarla birlikte kullanılmalıdır: dikkatli şekilde belirleyin, çünkü eşzamanlı olduğundan ve ana iş parçacığını engelleyecektir. Evet yaklaşık 5 MB ile sınırlıdır ve yalnızca dize içerebilir. Sekmeye özel olduğu için web çalışanları veya hizmet çalışanları konuma erişemez.

Eşzamanlı olduğu için LocalStorage seçeneğinden kaçınılmalıdır. ana ileti dizisini engeller. Yaklaşık 5 MB ile sınırlıdır ve kullanılabilir. Web çalışanları veya hizmet, LocalStorage'a erişemez birlikte çalışır.

Çerezlerin kullanım alanları vardır, ancak depolama için kullanılmamalıdırlar. Çerezler her HTTP isteğiyle gönderilir. Bu nedenle, küçük bir veri miktarı, her web isteğinin boyutunu önemli ölçüde artırır. Bunlar eşzamanlıdır ve web çalışanlarından erişilemez. Beğenme LocalStorage ve SessionStorage, çerezler yalnızca dizelerle sınırlıdır.

File System API ve FileWriter API, korumalı alanlı bir dosya sisteminde dosya okuma ve yazma. Eşzamansız olsa da önerilmez çünkü yalnızca Chromium tabanlı tarayıcılarda kullanılabilir.

File System Access API, kullanıcılar yerel dosya sistemlerindeki dosyaları kolayca okuyup düzenleyebilir. Kullanıcı Bir sayfanın herhangi bir yerel dosyayı okuyabilmesi veya yazabilmesi için önce izin vermesi gerekir ve izinleri oturumlarda kalıcı değildir.

WebSQL kullanılmamalıdır ve mevcut kullanım IndexedDB. Bu program, büyük çaplı kuruluşların neredeyse tamamından kaldırılmıştır izin verir. W3C 2010 yılında Web SQL spesifikasyonunu korumayı durdurdu, ve planlanan başka güncellemeler de yoktur.

Uygulama Önbelleği kullanılmamalı ve mevcut kullanım olmalıdır. hizmet çalışanlarına ve Cache API'ye taşınır. Yıllardır kullanımdan kaldırıldı ve sahip olacaksınız.

Ne kadar veri depolayabilirim?

Kısacası, büyük miktarda, en az birkaç yüz megabayt ve veya daha fazla depolama alanı alır. Tarayıcı uygulamaları değişiklik gösterir, ancak depolama alanı miktarı genellikle cihazınızdaki kullanılabilir depolama alanı miktarına olanak tanır.

Chrome, tarayıcının toplam disk alanının% 80'ine kadarını kullanmasına izin verir. Kaynaklar toplam disk alanının% 60'ını kullanabilir. Daha fazla bilgi edinmek için Storage Manager'ı API'deki mevcut maksimum kotayı belirler. Diğer Chromium tabanlı tarayıcı farklı olabilir.
- Chrome, Gizli modda bir kaynağın kullanabileceği depolama alanı miktarını azaltır yaklaşık% 5'ini kapsıyor.
- Kullanıcı, "Tümünü kapattığınızda çerezleri ve site verilerini temizle" ayarını etkinleştirdiyse pencereler" Chrome'da depolama kotası önemli ölçüde azaltılarak en fazla 300 MB olabilir.
- Şu bilgiler için bkz. PR #3896: Chrome'un uygulanmasıyla ilgili ayrıntılar.
Internet Explorer 10 ve sonraki sürümler 250 MB'a kadar depolama yapabilir ve kullanıcı tarafından bildirilebilir.
Firefox, tarayıcının% 50'ye kadar boş disk alanının kullanmasına izin verir. eTLD+1 grup (ör. example.com, www.example.com ve foo.bar.example.com) en fazla 2 GB kullanabilir. URL parametrelerinin Google tarafından nasıl ele alınmasını istediğinizi belirtmek için Hala ne kadar boş alan olduğunu belirlemek için StorageManager API kullanılabilir.
Safari'nin (hem masaüstü hem de mobil) yaklaşık 1 GB alana izin verdiği görülüyor. Sınır ulaşıldığında, Safari, kullanıcıdan bu sınırı 200 MB'ı yükselterek istemde bulunacaktır. artırılır. Bu konuda resmi bir doküman bulamadım.
- Mobil Safari'de ana ekrana PWA eklenirse yeni bir depolama kapsayıcısı oluşturur ve PWA (Progresif Web Uygulaması) arasında hiçbir şey paylaşılmaz ve mobil Safari'de kullanılabilir. Yüklü bir PWA'nın kotasına ulaşıldığında, Ek depolama alanı istemenin bir yolu yok gibi görünüyor.

Geçmişte bir site, depolanan belirli bir veri eşiğini aşıyorsa kullanıcıdan daha fazla veri kullanması için izin vermesini ister. Örneğin, Örneğin, kaynak 50 MB'tan fazla veri kullanıyorsa tarayıcı, kullanarak 100 MB'a kadar depolama yapabilir, ardından 50 MB'lık artışlarla tekrar sorabilirsiniz.

Günümüzde çoğu modern tarayıcı, kullanıcıdan işlem yapmasını istemeyecek ve kendine ayrılmış kotayı kullanabilir. Bunun tek istisnası Safari'dir. depolama alanı kotası aşıldığında istem girilir ve kotanın artırılması için izin istenir kotayı doldurur. Bir kaynak , kendisine ayrılmış kotadan daha fazlasını kullanmaya çalışırsa, daha fazla veri başarısız olur.

Kullanılabilir depolama alanı miktarını nasıl kontrol edebilirim?

Birçok tarayıcıda Depolama alanı miktarını belirlemek için StorageManager API'si kaynağa göre ne kadar depolama alanı kullandığı gibi bilgileri de görüntüler. Bu rapor, toplam IndexedDB ve Cache API'nin kullandığı bayt sayısını ifade eder ve kullanarak yaklaşık kalan depolama alanını hesaplayabilirsiniz.

if (navigator.storage && navigator.storage.estimate) {
  const quota = await navigator.storage.estimate();
  // quota.usage -> Number of bytes used.
  // quota.quota -> Maximum number of bytes available.
  const percentageUsed = (quota.usage / quota.quota) * 100;
  console.log(`You've used ${percentageUsed}% of the available storage.`);
  const remaining = quota.quota - quota.usage;
  console.log(`You can write up to ${remaining} more bytes.`);
}

StorageManager henüz tüm tarayıcılarda implemented, bu nedenle özelliği tarafından algılanması gerekir. Kullanılabilir olduğunda bile kota aşımı hatalarını yakalamaya devam edebilirsiniz (aşağıya bakın). Bazı durumlarda, depolama alanı miktarını aşacak şekilde düşebilir.

İnceleme

Geliştirme sırasında tarayıcınızın Geliştirici Araçları'nı kullanarak sağlayabilir ve depolanan tüm verileri kolayca temizleyebilirsiniz.

Chrome 88'e, sitenin depolama alanını geçersiz kılmanıza olanak tanıyan yeni bir özellik eklendi belirli bir kotayı kapatabilirsiniz. Bu özellik, bir şeyi simüle etme imkânıyla test edin ve uygulamalarınızın düşük disk kullanılabilirliğinde davranışını test edin senaryoları ele alacağız. Application (Uygulama) ve Storage'a (Depolama) gidip Özel depolama kotasını simüle et onay kutusunu işaretleyin ve simüle eder.

Geliştirici Araçları Depolama bölmesi.

Bu makale üzerinde çalışırken, size yardımcı olacak basit bir araç depolama alanını mümkün olduğunca hızlı bir şekilde kullanmaya çalışın. Doğrulamanın hızlı ve kolay bir farklı depolama mekanizmaları deniyor ve farklı depolama mekanizmaları ile nasıl kullanacağınızı öğreneceksiniz.

Kotanın aşılması durumunda nasıl işlem yapılır?

Kotanızı aştığınızda ne yapmalısınız? En önemlisi de ister QuotaExceededError ister QuotaExceededError olsun, her zaman yazma hatalarını yakalayıp işleyin. bir şey olur. Ardından, uygulamanızın tasarımına bağlı olarak nasıl kullanacağınıza karar verin. Örneğin, uzun süredir erişilmeyen içeriği silin, kaldırın veya kullanıcılara silmek istedikleri bilgileri seçmeleri için bir yöntem sunmak için kullanabilirsiniz.

Hem IndexedDB hem de Cache API, adlandırılmış bir DOMError atar Mevcut kotayı aştığınızda QuotaExceededError.

IndexedDB

Kaynak, kotasını aştıysa IndexedDB'ye yazma denemesi durumunda başarısız olur. İşlemin onabort() işleyicisi çağrılır ve bir etkinlik iletilir. Etkinliğin hata özelliğinde bir DOMException yer alır. name hatası QuotaExceededError sonucunu döndürür.

const transaction = idb.transaction(['entries'], 'readwrite');
transaction.onabort = function(event) {
  const error = event.target.error; // DOMException
  if (error.name == 'QuotaExceededError') {
    // Fallback code goes here
  }
};

Önbellek API'si

Kaynak, kotasını aştıysa Cache API'ye yazma girişiminde bulunur değeri QuotaExceededError DOMException ile reddedilecek.

try {
  const cache = await caches.open('my-cache');
  await cache.add(new Request('/sample1.jpg'));
} catch (err) {
  if (error.name === 'QuotaExceededError') {
    // Fallback code goes here
  }
}

Tahliye nasıl işler?

Web depolama alanı, "En İyi Sonuç" olmak üzere iki gruba ayrılır. ve "Kalıcı" olarak tanımlar. En iyi çaba, depolama alanının tarayıcı tarafından temizlenebilmesidir Ancak uzun vadeli veya kritik veriler açısından daha az dayanıklıdır. Depolama alanı azaldığında kalıcı depolama alanı otomatik olarak temizlenmez. Kullanıcı bu depolama alanını manuel olarak temizlemesi gerekiyor (tarayıcı ayarlarından).

Varsayılan olarak bir sitenin verileri (IndexedDB, Cache API vb. dahil) en iyi çaba kategorisidir. Bu, bir site istenen kalıcı depolama alanı, tarayıcı şahsi karar verme yetkisiyle (örneğin, cihaz depolama alanı azaldığında) site verilerine erişebilir.

En iyi çaba için tahliye politikası:

Chromium tabanlı tarayıcılar, tarayıcı çalışmadığında verileri çıkarmaya başlar önce en son kullanılan kaynaktaki tüm site verileri temizlenir, ardından bir sonraki adımda, tarayıcı sınırı aşana kadar ilerleyin.
Internet Explorer 10+ verileri çıkarmaz, ancak kaynağın düşünmüyorum.
Firefox, kullanılabilir disk alanı dolduğunda verileri çıkarmaya başlar. Önce en az kullanılan kaynaktan gelen tüm site verileri, ardından tıklayın.
Safari daha önce verileri çıkarmadı, ancak yakın zamanda yeni bir uygulama uyguladı tüm yazılabilir depolama alanlarında yedi günlük sınır (aşağıya bakın).

iOS ve iPadOS 13.4 ile macOS'te Safari 13.1'den itibaren IndexedDB, hizmet dahil olmak üzere tüm komut dosyası yazılabilir depolama alanlarında yedi günlük sınır çalışan kaydı ve Cache API'dir. Bu, Safari'nin tüm dosyaları kullanıcı Safari'yi yedi gün kullandıktan sonra önbellekten yardımcı olabilir. Bu çıkarma politikası, yüklenen uygulamalar için geçerli değildir. PWA'lar gösterilir. Görüntüleyin WebKit'te Tam Üçüncü Taraf Çerez Engelleme ve Daha Fazlası blog'unu inceleyebilirsiniz.

Bonus: IndexedDB için neden bir sarmalayıcı kullanmalısınız?

IndexedDB, kullanılmadan önce önemli düzeyde kurulum gerektiren alt seviye bir API'dir. Bu durum, basit verileri depolamak için özellikle zorlayıcı olabiliyor. Modern reklamların aksine etkinlik temelli API'ler var. Sarmalayıcıları şuna benzer: IndexedDB için idb, güçlü özelliklerden bazılarını gizler ancak daha fazlasını içerir. Daha da önemlisi karmaşık makineleri (ör. işlemler, şema sürümü oluşturma) kitaplığıyla birlikte gelen bir dizindir.

Sonuç

Depolama alanının sınırlı olduğu ve kullanıcının daha fazla depolama yapmasını isteyen günler geride kaldı daha fazla veri. Siteler, sahip oldukları tüm kaynakları ve verileri etkin bir şekilde gerekiyor. StorageManager API'yi kullanarak şunları yapabilirsiniz: kullanabileceğiniz miktarı ve kullanım miktarınızı belirleyebilirsiniz. Ve kalıcı depolama alanını kaldırmazsanız korunmasını sağlayabilir.

Ek kaynaklar

Teşekkürler

Jarryd Goodman, Phil Walton, Eiji Kitamura, Daniel Murphy'ye özel teşekkürler. İnceleme için Darwin Huang, Josh Bell, Marijn Kruisselbrink ve Victor Costan bu makaleye göz atın. Eiji Kitamura, Addy Osmani ve Marc Cohen'e temel alınan orijinal makaleleri gösterir. Eiji, bu videonun yararlı olan Tarayıcı Depolama Alanı Kötüye Kullanımı mevcut davranış. Mümkün olduğunca fazla veri depolamanıza ve depolama alanı sınırlarını aşmanız gerekir. Kazıyı yapan Francois Beaufort'a teşekkürler Safari'ye yükleyin.

Lokomotif resim Guillaume Bolduc tarafından şu tarihte: Lansmanı kaldırın.