Penjelasan terperinci tentang penggunaan cacheStorage dalam pengetahuan JavaScript_Basic

localStorage sepatutnya menjadi nama biasa? Tetapi terdapat lebih banyak lagi kepada keluarga simpanan tempatan daripada itu. Kami bercakap tentang sessionStorage sebelum ini, tetapi kini terdapat juga CacheStorage ajaib. Ia digunakan untuk menyimpan objek Respons. Dalam erti kata lain, ia digunakan untuk cache respons HTTP. Walaupun localStorage juga boleh melakukannya, ia mungkin lebih khusus.
Rujukan kepada CacheStorage dalam penyemak imbas dipanggil cache dan bukannya cacheStorage dalam kes unta, yang ditakrifkan dalam spesifikasi ServiceWorker. CacheStorage ialah koleksi berbilang Cache, dan setiap Cache boleh menyimpan berbilang objek Respons.
Tiada lagi yang bukan-bukan, inilah demo

<script>
caches.delete('c1');
caches.delete('c2');
Promise.all([
 caches.open('c1').then(function(cache) {
  return cache.put('/hehe', new Response('aaa', { status: 200 }));
 }),
 caches.open('c2').then(function(cache) {
  return cache.put('/hehe', new Response('bbb', { status: 200 }));
 })
]).then(function() {
 return caches.match('/hehe');
}).then(function(response) {
 return response.text();
}).then(function(body) {
 console.log(body);
});
</script>

Mula-mula, panggil kaedah terbuka pada cache untuk mendapatkan rujukan kepada objek Cache secara tidak segerak. Pada objek ini, kita boleh meletakkan objek Respons (parameter ialah URL dan objek Respons) dan menggunakan kaedah padanan untuk mendapatkannya (lalui URL dan dapatkan objek Respons yang sepadan).
Kaedah padanan bukan sahaja boleh dipanggil pada Cache, tetapi terdapat juga kaedah padanan pada CacheStorage Sebagai contoh, dalam contoh di atas, dua Cache dibuka dan URL dipanggil /hehe ditulis kepada mereka. Selepas operasi tulis selesai, kaedah padanan dipanggil pada CacheStorage luaran untuk dipadankan /hehe Hasilnya adalah rawak (saya tidak dapat mencari di mana peraturan ini ditakrifkan).
Walaupun contoh di atas hanya meletakkan satu data pada objek Cache, objek Cache itu sendiri boleh menyimpan lebih banyak pasangan URL/Respons. Dan menyediakan kaedah seperti padam (penghapusan pengguna) dan kunci (untuk traversal). Walau bagaimanapun, Cache tidak mempunyai kaedah yang jelas seperti localStorage Jika anda mesti mengosongkan Cache, anda boleh memadamkan keseluruhan Cache pada CacheStorage dan membukanya semula.
Set API ini adalah sama seperti ServiceWorker Ia biasanya digunakan dalam ServiceWorker Keseluruhan gaya reka bentuk juga berdasarkan Promise seperti ServiceWorker.