Mengelola Penyimpanan Offline HTML5

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

Dokumen ini memperkenalkan konsep dasar seputar jenis penyimpanan yang digunakan di Chrome dan menjelaskan Quota Management API eksperimental, yang memungkinkan Anda mengelola kuota penyimpanan. Dokumen ini mengasumsikan bahwa Anda sudah memahami konsep umum penyimpanan sisi klien dan mengetahui 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 di masa mendatang

Jenis penyimpanan

Di Google Chrome, Anda dapat meminta tiga jenis penyimpanan:

Jenis penyimpanan ini dijelaskan secara lebih mendetail di bagian berikut dan dibandingkan satu sama lain dalam tabel di bawah.

Penyimpanan sementara

Penyimpanan sementara adalah penyimpanan sementara yang tersedia untuk aplikasi web apa pun. Chrome otomatis memberikan penyimpanan sementara kepada aplikasi, sehingga Anda tidak perlu meminta alokasi.

Berbagi kolam renang

Penyimpanan sementara digunakan bersama oleh semua aplikasi web yang berjalan di browser. Kumpulan bersama dapat mencapai 1/3 dari kapasitas disk yang tersedia. Penyimpanan yang sudah digunakan oleh aplikasi disertakan dalam penghitungan kumpulan bersama; yaitu, penghitungan didasarkan pada (available storage space + storage being used by apps) * .333 .

Setiap aplikasi dapat memiliki penyimpanan bersama hingga 20%. Misalnya, jika total ruang disk yang tersedia adalah 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 melakukan kueri untuk jumlah ruang penyimpanan yang tersedia untuk aplikasi dan jumlah data yang telah disimpan untuk aplikasi, Anda tidak dapat meminta lebih banyak ruang penyimpanan sementara. Jika aplikasi melebihi kuota yang dialokasikan, error akan muncul.

Ruang penyimpanan habis

Setelah kuota penyimpanan untuk seluruh kumpulan terlampaui, seluruh data yang disimpan untuk host yang paling lama digunakan akan dihapus. Namun, browser tidak akan menghapus permanen data di LocalStorage dan SessionStorage. Untuk data yang disimpan di API offline lainnya, browser menghapus data secara keseluruhan, bukan sebagian agar data aplikasi tidak rusak secara tidak terduga.

Karena setiap aplikasi dibatasi hingga maksimum 20% dari penyimpanan bersama, penghapusan kemungkinan hanya jika pengguna secara 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 di hard drive mereka. Jika kapasitas disk yang tersedia semakin terbatas (Ingat, kumpulan bersama hanya mendapatkan setengah dari ruang disk yang tersedia saat ini), browser akan menghapus semua data yang disimpan untuk host yang paling lama tidak digunakan.

Penyimpanan persisten

Penyimpanan persisten adalah penyimpanan yang tetap berada di browser kecuali pengguna menghapusnya secara permanen. API ini hanya tersedia untuk aplikasi yang menggunakan File System API, tetapi nantinya akan tersedia untuk API offline lainnya seperti IndexedDB dan Cache Aplikasi.

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 mengizinkan Anda untuk menggunakan lebih banyak ruang penyimpanan. Chrome menampilkan kolom info yang meminta pengguna memberikan lebih banyak ruang penyimpanan lokal kepada aplikasi.

Penyimpanan tak terbatas

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

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

Membandingkan Jenis Penyimpanan

Tabel berikut menjelaskan perbedaan di antara ketiga jenis penyimpanan tersebut.

 Penyimpanan sementaraPenyimpanan persistenPenyimpanan tak terbatas
Deskripsi dasar

Penyimpanan sementara yang tersedia untuk aplikasi web apa pun.

Data ini otomatis dan tidak perlu diminta.

Penyimpanan permanen yang harus diminta melalui Quota Management API dan diberikan oleh pengguna.

Penyimpanan permanen untuk aplikasi dan ekstensi Chrome.

Atribut ini ditetapkan dalam file manifes dan harus diberikan oleh pengguna.

Ketersediaan

Semua aplikasi web.

Semua aplikasi web.Unik untuk ekstensi Chrome serta aplikasi web yang dihosting dan diinstal.
IzinTidak ada. Anda dapat menggunakannya tanpa memintanya secara eksplisit.

Anda harus meminta lebih banyak penyimpanan menggunakan Quota Management API.

Anda dapat meminta izin unlimitedStorage di file manifes untuk aplikasi atau ekstensi.
Pengalaman pengguna pada penggunaan pertamaTidak terlihat oleh pengguna. Aplikasi baru saja berjalan.

Chrome menampilkan kolom info yang meminta pengguna untuk menerima atau menolak permintaan penyimpanan.

Namun, jika jumlah kuota yang Anda minta sebenarnya kurang dari alokasi saat ini oleh aplikasi, tidak akan ada perintah yang ditampilkan. Semakin besar kuota yang akan dipertahankan.

Saat penginstalan, pengguna akan diberi tahu tentang izin yang diperlukan oleh aplikasi atau ekstensi. Dengan melanjutkan penginstalan, pengguna secara implisit memberikan izin untuk semua halaman yang URL-nya tercantum dalam file manifest.json untuk app atau extension.

Pengalaman pengguna pada permintaan berikutnya untuk peningkatan penyimpananTidak berlaku. Anda tidak dapat meminta tambahan penyimpanan sementara.

Chrome akan meminta pengguna kembali.

 

Chrome tidak akan meminta pengguna setelah penginstalan, terlepas dari permintaan penambahan kuota oleh aplikasi atau ekstensi.
Persistensi data

Sementara. Browser dapat menghapus data.

Permanen Browser tidak menghapus data kecuali jika diinstruksikan oleh pengguna. Data tersedia dalam akses berikutnya.

Jangan berasumsi bahwa data bersifat permanen, karena pengguna dapat menghapusnya.

Sama seperti penyimpanan persisten.

 

Ruang penyimpanan default

Hingga 20% dari kolam bersama.

0 MB. Anda harus secara eksplisit meminta ruang penyimpanan tertentu.

0 MB. Anda harus secara eksplisit meminta unlimitedStorage dalam file manifes.

Jika Anda tidak menentukan persyaratan penyimpanan, Chrome akan mengalokasikan penyimpanan ke aplikasi dari penyimpanan bersama untuk sementara.

Ruang penyimpanan maksimumHingga 20% dari kolam bersama.sebesar ruang yang tersedia di {i>hard drive<i}. Aplikasi ini tidak memiliki penyimpanan gabungan tetap.sebesar ruang yang tersedia di {i>hard drive<i}.
Kasus penggunaan yang direkomendasikanMenyimpan ke cache.Aplikasi yang berfungsi secara offline atau memiliki aset dalam jumlah besar.Aplikasi yang dirancang untuk berjalan di Google Chrome.
API yang dapat menggunakannya

API Offline

Catatan: API penyimpanan web seperti LocalStorage dan SessionStorage tetap sebesar 5 MB.

API Sistem File

API Offline

  • Cache Aplikasi
  • Sistem File
  • IndexedDB
  • WebSQL (tidak digunakan lagi)

Catatan: API penyimpanan web seperti LocalStorage dan SessionStorage tetap sebesar 5 MB.

Mengelola kuota

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

API ini 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 perintah berikut:

  • Jenis penyimpanan yang ingin diperiksa
  • Berhasil callback

Penggunaan yang dilaporkan oleh API mungkin tidak sesuai dengan ukuran data pengguna sebenarnya, karena setiap penyimpanan mungkin memerlukan beberapa byte tambahan untuk menyimpan metadatanya. Selain itu, update status dapat mengalami keterlambatan, sehingga API tidak mencerminkan status penyimpanan terbaru.

Cuplikan kode berikut menunjukkan cara mengajukan pertanyaan tentang 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 meminta status penyimpanan persisten, cukup ganti webkitStorageInfo.TEMPORARY dengan webkitStorageInfo.PERSISTENT. Enum ini juga berada dalam 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 melampaui batas maksimum (seperti yang dijelaskan dalam tabel).

Untuk penyimpanan persisten untuk File System API, kuota default adalah 0, sehingga Anda perlu secara eksplisit meminta penyimpanan untuk aplikasi Anda. Panggil requestQuota() dengan hal berikut:

  • Jenis penyimpanan
  • Ukuran
  • Berhasil callback

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

  • Jika Anda meminta kuota yang lebih besar, browser akan menampilkan kolom info kepada pengguna dan meminta mereka untuk memberikan atau menolak izin untuk peningkatan kuota. Dalam beberapa kasus, permintaan mungkin ditolak secara diam-diam, dan kuota saat ini atau kuota yang lebih kecil akan ditampilkan.
  • Jika jumlah kuota yang Anda minta kurang dari alokasi saat ini aplikasi, tidak ada perintah yang akan ditampilkan.
  • Jika meminta penyimpanan lebih besar dari yang diizinkan, Anda akan mendapatkan error (QUOTA_EXCEEDED_ERR).
  • Jika Anda memanggil requestQuota() lagi setelah pengguna memberikan izin, tidak akan ada yang terjadi. Jadi, tidak perlu lagi memanggil metode tersebut.

Berikut ini cara meminta lebih banyak ruang penyimpanan:

// 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 dapat menguji pengelolaan kuota dari awal di aplikasi. 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 ditandai.

Referensi API

Bagian ini mendokumentasikan metode Quota Management API.

Konstanta

Berikut adalah konstanta webkitStorageInfo, yang menunjukkan jenis penyimpanan.

KonstantaNilaiDeskripsi
TEMPORARY0Penyimpanan sementara.
PERSISTENT1Penyimpanan persisten.

Ringkasan metode

queryUsageAndQuota
requestQuota

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 sedang digunakan aplikasi.
    • Jumlah byte yang tersisa dalam kuota.
  • errorCallback: Callback error opsional.

requestQuota

Minta penyimpanan ekstra. Browser menampilkan kolom info untuk meminta pengguna memberikan atau menolak izin aplikasi untuk mendapatkan lebih banyak penyimpanan.

 // you could also use it from webkitTemporaryStorage
navigator.webkitPersistentStorage.requestQuota (
      newQuotaInBytes,
      quotaCallback,
      errorCallback);
Parameter
  • newQuotaInBytes: Jumlah byte yang Anda inginkan dalam kuota penyimpanan.
  • successCallback: Callback opsional yang meneruskan jumlah byte yang diberikan.
  • errorCallback: Callback error opsional.

Pengembangan di masa mendatang

Rencananya adalah untuk menempatkan semua API penyimpanan offline HTML5—termasuk IndexedDB, Cache Aplikasi, Sistem File, dan API lain yang mungkin ditentukan—pada Quota Management API. Anda akan dapat mengelola semua alokasi penyimpanan dengannya.