🙏🏾 🔖 🤳🏿 Penyimpanan Web 🧒🏿 🤛🏼 🤘🏻

Selamat siang teman.

Saya mempersembahkan kepada Anda terjemahan artikel "Storage for the Web" oleh Pete LePage.

Ada beberapa teknologi untuk menyimpan data di browser. Mana yang lebih baik?

Koneksi internet mungkin buruk atau bahkan tidak ada di tempat-tempat tertentu. Oleh karena itu, dukungan offline adalah salah satu fitur utama dari aplikasi web progresif . Bahkan dengan koneksi berkecepatan tinggi, sebaiknya menggunakan caching dan teknik lain untuk meningkatkan pengalaman pengguna. Ada beberapa cara untuk menyimpan file (HTML, JavaScript, CSS, gambar, dll.) Dan data (data pengguna, artikel berita, dll.). Tetapi solusi mana yang lebih baik untuk dipilih? Dan bagaimana memastikan daya tahannya?

Apa yang harus digunakan?

Saya dapat menyarankan hal-hal berikut:

Untuk sumber daya jaringan yang diperlukan agar aplikasi berfungsi dan menampilkan konten, gunakan API Penyimpanan Cache (bagian dari pekerja layanan ).
Untuk data lain, gunakan IndexedDB (dengan bungkus dari janji ).

IndexedDB dan Cache API didukung oleh semua browser modern. Mereka tidak sinkron, mis. Jangan memblokir utas utama (eksekusi kode). Mereka tersedia di objek Window, pekerja web, dan pekerja layanan. Dengan kata lain, mereka dapat digunakan di mana saja.

Bagaimana dengan mekanisme lain?

Browser juga memiliki mekanisme penyimpanan data lain, tetapi mereka memiliki keterbatasan tertentu dan dapat menyebabkan masalah kinerja.

SessionStorage . , , , IndexedDB. , , . 5 ( ), - -.
LocalStorage . 5 ( ), - -.
Cookies . HTTP-, . , -, .
File System API FileWriter API . , , , Chrome.
Native File System API . . .
WebSQL , IndexedDB. . W3C 2010 .
Application Cache , - Cache API. .

?

Setidaknya beberapa ratus megabita, berpotensi ratusan gigabita. Tergantung pada browser, namun, jumlah penyimpanan biasanya didasarkan pada jumlah memori yang tersedia di perangkat pengguna.

Chrome memungkinkan Anda untuk menggunakan hingga 60% ruang disk. Anda dapat menggunakan API StorageManager untuk menentukan batas (kuota).
Internet Explorer 10 dan yang lebih baru dapat menyimpan hingga 250 MB data.
Firefox memungkinkan Anda menyimpan hingga 2 GB data. Anda dapat menggunakan API StorageManager untuk menentukan batas.
Safari (baik desktop dan seluler) memungkinkan Anda menyimpan hingga 1 GB data. Setelah mencapai batas, Safari meminta izin kepada pengguna untuk meningkatkan kuota sebesar 200 MB.

Di masa lalu, ketika batas penyimpanan tercapai, browser meminta izin pengguna untuk menambah jumlah memori. Misalnya, ketika batas 50 MB tercapai, browser meminta izin pengguna untuk meningkatkan kuota menjadi 100 MB dan setiap 50 MB.

Saat ini, sebagian besar browser tidak, secara otomatis meningkatkan jumlah penyimpanan dalam kuota. Pengecualian adalah Safari, yang, setelah mencapai 750 MB, meminta izin pengguna untuk meningkatkan batas menjadi 1,1 GB. Upaya untuk melampaui kuota akan berakhir dengan kegagalan.

Bagaimana cara memeriksa saldo batas?

Untuk ini, di banyak browser, Anda dapat menggunakan StorageManager API. Ini menunjukkan jumlah total byte yang digunakan oleh IndexedDB dan Cache API, memungkinkan Anda untuk menghitung sisanya.

if(navigator.storage && navigator.storage.estimate) {
  const quota = await navigator.storage.estimate()
  // quota.usage ->   
  // quota.quota ->   
  const percentageUsed = (quota.usage / quota.quota) * 100
  console.log(`  ${ percentageUsed}% `)
  const remaining = quota.quota - quota.usage
  console.log(`   ${remaining} `)
}

Harap perhatikan bahwa API StorageManager belum didukung oleh semua browser. Namun, bahkan jika didukung, penangan kesalahan harus disediakan. Dalam beberapa kasus, kuota dapat melebihi kapasitas penyimpanan aktual.

Inspeksi

Selama pengembangan, Anda dapat menggunakan alat peramban untuk melacak status berbagai repositori dan membersihkannya.

Saat mengerjakan artikel ini, saya menulis alat sederhana ini untuk pengujian cepat kemampuan penyimpanan. Ini adalah cara cepat dan mudah untuk bereksperimen dengan berbagai mekanisme penyimpanan data dan melihat apa yang terjadi ketika kuota terlampaui.

Bagaimana cara menangani kesalahan?

Apa yang harus dilakukan ketika batas tercapai? Tentu saja, atasi kesalahan, baik itu QuotaExceededError atau yang lainnya. Kemudian, tergantung pada desain aplikasi Anda, Anda harus memilih cara mereka diproses. Anda dapat, misalnya, menghapus konten atau data lama tergantung pada ukurannya, atau memberi pengguna kemampuan untuk memutuskan apa yang akan dihapus.

IndexedDB dan Cache API melempar DOMError QuotaExceededError ketika kuota terlampaui.

Indexeddb

Ketika batas tercapai, upaya untuk menulis data ke IndexedDB akan gagal. Metode onabort () akan dipanggil dengan acara sebagai argumen. Acara tersebut akan berisi DOMException di properti kesalahan. Memeriksa nama kesalahan akan mengembalikan QuotaExceededError.

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

API Cache

Upaya menulis data ke API Cache ketika batas tercapai akan ditolak dengan kuotaException DotaExceededError.

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

Bagaimana cara kerja pembersihan penyimpanan?

Repositori web terbagi dalam dua kategori, "berdiri sendiri" dan "dikelola". Berdiri sendiri berarti bahwa repositori dapat dihapus oleh browser tanpa campur tangan pengguna, namun itu kurang mudah beradaptasi untuk penggunaan jangka panjang, serta dengan adanya data penting. Kubah terkelola tidak secara otomatis dibersihkan ketika penuh. Pengguna harus menghapus penyimpanan semacam itu secara manual (melalui pengaturan browser).

Secara default, penyimpanan web (IndexedDB, Cache API, dll.) Diklasifikasikan sebagai berdiri sendiri, yang berarti bahwa jika kontrol manual tidak diinstal , browser dapat secara mandiri menghapus penyimpanan dalam kondisi tertentu, misalnya, ketika mengisi.

Kondisi untuk membersihkan penyimpanan adalah sebagai berikut:

Saat penyimpanan penuh, Chrome menghapus data, mulai dengan yang paling tidak diminta (yang paling lama digunakan), hingga masalah luapan diselesaikan.
IE 10+ tidak menghapus penyimpanan, tetapi memblokir kemampuan untuk menulis data.
Firefox melakukan hal yang sama dengan Chrome.
Safari sebelumnya tidak mengosongkan brankas, tetapi baru-baru ini menambahkan periode penyimpanan data tujuh hari.

Dimulai dengan iOS dan iPad 13.4, Safari 13.1 di macOS, ada periode penyimpanan data tujuh hari. Ini berarti bahwa jika pengguna tidak mengakses data dalam waktu tujuh hari, mereka akan dihapus. Kebijakan ini tidak berlaku untuk aplikasi yang ditambahkan ke layar beranda.

Bonus: Promise Wrap Over IndexedDB

IndexedDB adalah API tingkat rendah yang memerlukan beberapa konfigurasi sebelum digunakan, yang mungkin tidak perlu jika Anda perlu menyimpan data sederhana. Tidak seperti kebanyakan API berbasis Janji modern, ini berbasis acara. Pembungkus dari janji-janji, seperti idb, menyembunyikan beberapa fitur yang kuat dari repositori ini, tetapi, yang lebih penting, itu juga menyembunyikan mekanisme internal yang kompleks (transaksi, versi).

Kesimpulan

Waktu penyimpanan terbatas dan permintaan izin pengguna untuk meningkatkan batas telah terlupakan. Situs dapat secara efektif menyimpan semua sumber daya dan data yang mereka butuhkan untuk bekerja. Menggunakan StorageManager API, Anda dapat menentukan berapa banyak memori yang digunakan dan berapa banyak yang tersisa. Dan dengan menempatkan penyimpanan dalam mode kontrol manual, Anda dapat melindungi data dari penghapusan.

Catatan per.:

Di sini Anda dapat melihat cara menulis aplikasi untuk catatan menggunakan idb.
Di sini Anda dapat melihat bagaimana pekerja layanan bekerja.

Terima kasih atas waktu Anda. Saya harap itu dihabiskan dengan baik.

Penyimpanan Web