Mengelola Penyimpanan Offline HTML5

HTML5 memperkenalkan banyak API penyimpanan yang memungkinkan Anda menyimpan data dalam jumlah besar secara lokal di browser. Tetapi jumlah ruang yang dialokasikan untuk setiap aplikasi secara {i>default<i} dibatasi hingga beberapa megabyte. Dengan Google Chrome, Anda dapat meminta kuota penyimpanan yang lebih besar, melebihi batas sebelumnya, yaitu hanya 5 MB.

Dokumen ini memperkenalkan Anda pada konsep dasar seputar jenis penyimpanan yang digunakan di Chrome dan menjelaskan Quota Management API eksperimental, yang memungkinkan Anda mengelola kuota penyimpanan. Tujuan mengasumsikan bahwa Anda sudah familier dengan konsep umum penyimpanan sisi klien dan tahu cara menggunakan API offline.

Daftar Isi

1. Jenis penyimpanan
   1. Sementara
   2. Persisten
   3. Tidak terbatas
   4. Membandingkan Jenis Penyimpanan
2. Mengelola kuota
   1. Penggunaan dan ketersediaan penyimpanan kueri
   2. Meminta penyimpanan ekstra
   3. Mereset kuota untuk pengujian
3. Referensi API
   1. Konstanta
   2. Ringkasan metode
   3. Metode
4. Pengembangan masa depan

Jenis penyimpanan

Di Google Chrome, Anda dapat meminta tiga jenis penyimpanan:

• Sementara
• Persisten
• Tidak terbatas

Jenis penyimpanan ini dijelaskan secara lebih mendetail di bagian berikut dan dibandingkan dengan masing-masingnya lainnya pada tabel di bawah.

Penyimpanan sementara

Penyimpanan sementara adalah penyimpanan sementara yang tersedia untuk semua aplikasi web. Chrome secara otomatis memberi aplikasi Anda untuk penyimpanan sementara, sehingga Anda tidak perlu meminta alokasi.

Berbagi kolam renang

Penyimpanan sementara digunakan bersama oleh semua aplikasi web yang berjalan di browser. Penyimpanan bersama dapat memiliki kapasitas hingga 1/3 dari kapasitas disk yang tersedia. Penyimpanan yang telah digunakan aplikasi termasuk dalam penghitungan dari kumpulan bersama; artinya, perhitungan didasarkan pada (available storage space + storage being used by apps) * .333 .

Setiap aplikasi dapat memiliki hingga 20% dari kumpulan bersama. Sebagai contoh, jika total ruang {i>disk<i} yang tersedia 60 GB, penyimpanan bersama sebesar 20 GB, dan aplikasi dapat memiliki hingga 4 GB. Ini dihitung dari 20% (hingga 4 GB) dari 1/3 (hingga 20 GB) dari ruang disk yang tersedia (60 GB).

Meminta lebih banyak ruang penyimpanan

Meskipun Anda dapat meminta jumlah ruang penyimpanan yang tersedia untuk aplikasi Anda dan jumlahnya yang sudah disimpan untuk aplikasi, Anda tidak dapat meminta lebih banyak ruang penyimpanan sementara. Jika aplikasi melebihi kuota yang dialokasikan, akan muncul pesan error.

Ruang penyimpanan habis

Setelah kuota penyimpanan untuk seluruh kumpulan terlampaui, seluruh data yang disimpan selama {i>host<i} yang baru-baru ini digunakan akan dihapus. Namun, browser tidak akan menghapus data di LocalStorage dan {i>SessionStorage<i}. Untuk data yang disimpan di API offline lainnya, browser akan menghapus data seluruhnya dan bukan sebagian sehingga data aplikasi tidak rusak dengan cara yang tidak terduga.

Karena setiap aplikasi dibatasi hingga maksimum 20% dari penyimpanan gabungan, penghapusan kemungkinan hanya jika pengguna aktif menjalankan lebih dari lima aplikasi offline yang masing-masing menggunakan penyimpanan maksimum.

Namun, ruang penyimpanan yang tersedia dapat menyusut saat pengguna menambahkan lebih banyak file ke hard drive mereka. Jika kapasitas disk yang tersedia hampir habis (Ingat, penyimpanan bersama hanya mendapatkan setengah dari kapasitas saat ini yang tersedia kapasitas {i>disk<i}), browser akan menghapus semua data yang disimpan untuk {i>host<i} yang paling lama digunakan.

Penyimpanan persisten

Penyimpanan tetap adalah penyimpanan yang tetap berada di browser, kecuali jika pengguna menghapusnya. Tersedia hanya untuk aplikasi yang menggunakan File System API, tetapi pada akhirnya akan tersedia untuk API offline lainnya seperti tensorflow dan {i>Application Cache<i}.

Aplikasi dapat memiliki kuota yang lebih besar untuk penyimpanan persisten daripada penyimpanan sementara, tetapi Anda harus meminta penyimpanan menggunakan Quota Management API dan pengguna harus memberi Anda izin untuk menggunakan spasi. Chrome menampilkan kolom info yang meminta pengguna untuk memberikan lebih banyak ruang penyimpanan lokal ke aplikasi.

Penyimpanan tak terbatas

Penyimpanan tak terbatas mirip dengan penyimpanan persisten, tetapi hanya tersedia untuk aplikasi Chrome dan ekstensi (file .crx). Ukuran penyimpanan tak terbatas hanya dibatasi oleh ketersediaan ruang penyimpanan di {i>hard drive<i} pengguna. Anda dapat meminta izin unlimitedStorage di file manifes untuk aplikasi atau ekstensi. Saat pemasangan, pengguna diberi tahu tentang izin yang diperlukan oleh aplikasi atau ekstensi. Dengan melanjutkan instalasi, pengguna secara implisit memberikan izin untuk semua halaman yang URL-nya tercantum dalam file manifest.json.

Untuk mempelajari lebih lanjut, lihat panduan developer terkait untuk aplikasi dan ekstensi.

Membandingkan Jenis Penyimpanan

Tabel berikut menjelaskan perbedaan antara ketiga jenis penyimpanan tersebut.

Mengelola kuota

Dengan Quota Management API, yang diperkenalkan di Chrome 13, Anda dapat melakukan hal berikut:

• Penggunaan dan ketersediaan penyimpanan kueri
• Meminta penyimpanan ekstra
• Mereset kuota untuk pengujian

API diimplementasikan dengan objek global window.webkitStorageInfo.

Untuk dokumentasi referensi, lihat bagian berikutnya.

Membuat kueri penggunaan dan ketersediaan penyimpanan

Untuk mengkueri ukuran penyimpanan yang sedang digunakan dan ruang yang tersedia yang tersisa untuk host, panggil queryUsageAndQuota() dengan hal berikut:

• Jenis penyimpanan yang ingin Anda periksa
• Callback berhasil

Penggunaan yang dilaporkan oleh API mungkin tidak sesuai dengan ukuran data pengguna sebenarnya, karena setiap penyimpanan mungkin membutuhkan beberapa {i>byte<i} tambahan untuk menyimpan {i>metadata<i}-nya. Selain itu, pembaruan status dapat mengalami keterlambatan, sehingga API tidak mencerminkan status penyimpanan terbaru.

Cuplikan kode berikut menunjukkan cara menanyakan ruang penyimpanan:

// Request storage usage and capacity left
// Choose either Temporary or Persistent
navigator.webkitTemporaryStorage.queryUsageAndQuota (
    function(usedBytes, grantedBytes) {
        console.log('we are using ', usedBytes, ' of ', grantedBytes, 'bytes');
    },
    function(e) { console.log('Error', e);  }
);

Jika Anda ingin menanyakan status penyimpanan persisten, cukup ganti webkitStorageInfo.TEMPORARY dengan webkitStorageInfo.PERSISTENT. Enum juga berada di Objek window (namespace global), sehingga Anda juga dapat menggunakan window.PERSISTENT dan window.TEMPORARY.

Meminta penyimpanan ekstra

Anda tidak perlu meminta lebih banyak penyimpanan sementara karena alokasinya otomatis, dan Anda tidak bisa mendapatkan melampaui batas maksimum (seperti yang dijelaskan dalam tabel).

Untuk penyimpanan persisten untuk File System API, kuota default-nya adalah 0, jadi Anda harus secara eksplisit meminta penyimpanan untuk aplikasi Anda. Panggil requestQuota() dengan kode berikut:

• Jenis penyimpanan
• Ukuran
• Callback berhasil

Bergantung pada apa yang Anda minta, hal berikut akan terjadi:

• Jika Anda meminta kuota yang lebih besar, browser menyajikan bilah info kepada pengguna dan meminta mereka untuk memberikan atau menolak izin untuk peningkatan kuota. Dalam beberapa kasus, permintaan tersebut mungkin tersembunyi ditolak, dan kuota saat ini atau kuota yang lebih kecil akan dikembalikan.
• Jika jumlah kuota yang Anda minta kurang dari alokasi aplikasi saat ini, dialog tidak akan ditampilkan.
• Jika Anda meminta penyimpanan ekstra dari yang diizinkan, Anda akan mendapatkan error (QUOTA_EXCEEDED_ERR).
• Jika Anda memanggil requestQuota() lagi setelah pengguna memberikan izin, tidak akan terjadi apa-apa. Jadi jangan repot-repot memanggil metode itu lagi.

Berikut cara meminta ruang penyimpanan tambahan:

// Request Quota (only for File System API)
var requestedBytes = 1024*1024*10; // 10MB

navigator.webkitPersistentStorage.requestQuota (
    requestedBytes, function(grantedBytes) {
        window.requestFileSystem(PERSISTENT, grantedBytes, onInitFs, errorHandler);

    }, function(e) { console.log('Error', e); }
);
});

Mereset kuota untuk pengujian

Saat menguji penyimpanan di aplikasi, Anda mungkin ingin menghapus data yang disimpan sehingga Anda dapat manajemen kuota tes kembali di aplikasi Anda. Untuk melakukannya:

1. Masukkan chrome://settings/cookies di omnibox (kolom URL).
2. Telusuri aplikasi Anda.
3. Pilih aplikasi Anda.
4. Klik X di sisi kanan pilihan yang disorot.

Referensi API

Bagian ini mendokumentasikan metode Quota Management API.

Konstanta

Berikut adalah konstanta webkitStorageInfo, yang menunjukkan jenis penyimpanan.

Ringkasan metode

Metode

queryUsageAndQuota

Periksa ukuran penyimpanan yang sedang digunakan dan ruang yang tersedia yang tersisa untuk host.

 // you could also use it from webkitPersistentStorage
navigator.webkitTemporaryStorage.queryUsageAndQuota(
      successCallback,
      errorCallback);

• successCallback: Callback opsional dengan dua parameter:

  • Jumlah byte yang digunakan aplikasi saat ini.
  • Jumlah byte yang tersisa dalam kuota.

• errorCallback: Callback error opsional.

requestQuota

Minta penyimpanan ekstra. Browser menyajikan bilah info untuk meminta pengguna memberikan atau menolak aplikasi izin untuk memiliki lebih banyak penyimpanan.

 // you could also use it from webkitTemporaryStorage
navigator.webkitPersistentStorage.requestQuota (
      newQuotaInBytes,
      quotaCallback,
      errorCallback);

Parameter

• newQuotaInBytes: Jumlah byte yang diinginkan dalam kuota penyimpanan Anda.
• successCallback: Callback opsional yang meneruskan jumlah byte yang diberikan.
• errorCallback: Callback error opsional.

Pengembangan di masa depan

Rencananya adalah untuk menempatkan semua API penyimpanan offline HTML5—termasuk IndexedDB, Cache Aplikasi, File Sistem, dan API lain yang mungkin ditentukan—di bawah Kuota API Pengelolaan. Anda akan dapat mengelola semua alokasi penyimpanan dengan aplikasi tersebut.