Di mana file javascript disimpan?

Di tempat lain di area pembelajaran MDN, kami berbicara tentang perbedaan antara dan. Sebagian besar situs web modern bersifat dinamis — mereka menyimpan data di server menggunakan semacam basis data (penyimpanan sisi server), lalu menjalankan kode sisi server untuk mengambil data yang diperlukan, memasukkannya ke dalam templat halaman statis, dan menyajikan hasil HTML ke

Penyimpanan sisi klien bekerja dengan prinsip serupa, tetapi memiliki kegunaan yang berbeda. Ini terdiri dari API JavaScript yang memungkinkan Anda menyimpan data pada klien (mis. e. pada mesin pengguna) dan kemudian mengambilnya saat dibutuhkan. Ini memiliki banyak kegunaan yang berbeda, seperti

• Personalisasi preferensi situs (mis. g. menampilkan pilihan widget khusus, skema warna, atau ukuran font pengguna)
• Bertahan aktivitas situs sebelumnya (mis. g. menyimpan konten keranjang belanja dari sesi sebelumnya, mengingat jika pengguna sebelumnya masuk)
• Menyimpan data dan aset secara lokal sehingga situs akan lebih cepat (dan berpotensi lebih murah) untuk diunduh, atau dapat digunakan tanpa sambungan jaringan
• Menyimpan dokumen aplikasi web yang dihasilkan secara lokal untuk digunakan secara offline

Seringkali penyimpanan sisi klien dan sisi server digunakan bersama. Misalnya, Anda dapat mengunduh sekumpulan file musik (mungkin digunakan oleh game web atau aplikasi pemutar musik), menyimpannya di dalam database sisi klien, dan memutarnya sesuai kebutuhan. Pengguna hanya perlu mengunduh file musik satu kali — pada kunjungan berikutnya, file tersebut akan diambil dari database

Catatan. Ada batasan jumlah data yang dapat Anda simpan menggunakan API penyimpanan sisi klien (mungkin baik per API individu maupun secara kumulatif); . Lihat Batas penyimpanan browser dan kriteria pengusiran untuk informasi lebih lanjut

Konsep penyimpanan sisi klien sudah ada sejak lama. Sejak awal web, situs telah menggunakan cookie untuk menyimpan informasi guna mempersonalisasi pengalaman pengguna di situs web. Itu adalah bentuk paling awal dari penyimpanan sisi klien yang biasa digunakan di web

Saat ini, ada mekanisme yang lebih mudah tersedia untuk menyimpan data sisi klien, oleh karena itu kami tidak akan mengajari Anda cara menggunakan cookie di artikel ini. Namun, ini tidak berarti cookie sama sekali tidak berguna di web modern — cookie masih digunakan secara umum untuk menyimpan data terkait personalisasi dan status pengguna, mis. g. ID sesi dan token akses. Untuk informasi selengkapnya tentang cookie, lihat artikel Menggunakan cookie HTTP kami

Fitur "lebih mudah" yang kami sebutkan di atas adalah sebagai berikut

• API Penyimpanan Web menyediakan mekanisme untuk menyimpan dan mengambil item data yang lebih kecil yang terdiri dari nama dan nilai yang sesuai. Ini berguna ketika Anda hanya perlu menyimpan beberapa data sederhana, seperti nama pengguna, apakah mereka masuk, warna apa yang digunakan untuk latar belakang layar, dll.
• IndexedDB API menyediakan browser dengan sistem database lengkap untuk menyimpan data yang kompleks. Ini dapat digunakan untuk hal-hal mulai dari kumpulan catatan pelanggan yang lengkap hingga tipe data yang kompleks seperti file audio atau video

Anda akan mempelajari lebih lanjut tentang API ini di bawah

localStorage.removeItem("name");
myName = localStorage.getItem("name");
myName;

Penggunaan Cache dan Service Worker adalah topik lanjutan, dan kami tidak akan membahasnya secara mendetail di artikel ini, meskipun kami akan menunjukkan contohnya di bagian di bawah ini

API Penyimpanan Web sangat mudah digunakan — Anda menyimpan pasangan data nama/nilai sederhana (terbatas pada string, angka, dll. ) dan mengambil nilai-nilai ini bila diperlukan

Mari tunjukkan caranya

1. Pertama, buka template kosong penyimpanan web kami di GitHub (buka ini di tab baru)
2. Buka konsol JavaScript alat pengembang browser Anda
3. Semua data penyimpanan web Anda terkandung dalam dua struktur seperti objek di dalam browser.

   localStorage.removeItem("name");
   myName = localStorage.getItem("name");
   myName;
   

   9 dan

   localStorage.setItem("name", "Chris");
   let myName = localStorage.getItem("name");
   myName;
   

   0. Yang pertama menyimpan data selama browser terbuka (data hilang saat browser ditutup) dan yang kedua menyimpan data bahkan setelah browser ditutup lalu dibuka lagi. Kami akan menggunakan yang kedua dalam artikel ini karena umumnya lebih bermanfaat. Metode

   localStorage.setItem("name", "Chris");
   let myName = localStorage.getItem("name");
   myName;
   

   _1 memungkinkan Anda untuk menyimpan item data dalam penyimpanan — dibutuhkan dua parameter. nama barang, dan nilainya. Coba ketikkan ini ke konsol JavaScript Anda (ubah nilainya menjadi nama Anda sendiri, jika Anda mau. )

   localStorage.setItem("name", "Chris");
   

   _

4. Metode

   localStorage.setItem("name", "Chris");
   let myName = localStorage.getItem("name");
   myName;
   

   _2 mengambil satu parameter — nama item data yang ingin Anda ambil — dan mengembalikan nilai item. Sekarang ketikkan baris ini ke konsol JavaScript Anda

   let myName = localStorage.getItem("name");
   myName;
   

   _
   Saat mengetik di baris kedua, Anda akan melihat bahwa variabel

   localStorage.setItem("name", "Chris");
   let myName = localStorage.getItem("name");
   myName;
   

   3 sekarang berisi nilai item data

   localStorage.setItem("name", "Chris");
   let myName = localStorage.getItem("name");
   myName;
   

   4
5. Metode

   localStorage.setItem("name", "Chris");
   let myName = localStorage.getItem("name");
   myName;
   

   _5 mengambil satu parameter — nama item data yang ingin Anda hapus — dan menghapus item tersebut dari penyimpanan web. Ketik baris berikut ke dalam konsol JavaScript Anda

   localStorage.removeItem("name");
   myName = localStorage.getItem("name");
   myName;
   

   Baris ketiga sekarang harus mengembalikan

   localStorage.setItem("name", "Chris");
   let myName = localStorage.getItem("name");
   myName;
   

   6 — item

   localStorage.setItem("name", "Chris");
   let myName = localStorage.getItem("name");
   myName;
   

   4 tidak lagi ada di penyimpanan web

Salah satu fitur utama penyimpanan web adalah bahwa data tetap ada di antara pemuatan halaman (dan bahkan saat browser dimatikan, dalam kasus

localStorage.setItem("name", "Chris");
let myName = localStorage.getItem("name");
myName;

1. Buka kembali template kosong penyimpanan web kami, tetapi kali ini di browser yang berbeda dengan yang Anda gunakan untuk membuka tutorial ini. Ini akan membuatnya lebih mudah untuk ditangani
2. Ketik baris ini ke dalam konsol JavaScript browser

   localStorage.setItem("name", "Chris");
   let myName = localStorage.getItem("name");
   myName;
   

   Anda akan melihat item nama dikembalikan
3. Sekarang tutup browser dan buka lagi
4. Masukkan baris berikut lagi

   let myName = localStorage.getItem("name");
   myName;
   

   _
   Anda akan melihat bahwa nilainya masih tersedia, meskipun browser telah ditutup dan dibuka kembali

Ada penyimpanan data terpisah untuk setiap domain (setiap alamat web terpisah dimuat di browser). Anda akan melihat bahwa jika Anda memuat dua situs web (katakanlah google. com dan amazon. com) dan coba simpan item di satu situs web, item tersebut tidak akan tersedia di situs web lain

Ini masuk akal — Anda dapat membayangkan masalah keamanan yang akan muncul jika situs web dapat melihat data satu sama lain

Mari terapkan pengetahuan yang baru ditemukan ini dengan menulis contoh kerja untuk memberi Anda gambaran tentang bagaimana penyimpanan web dapat digunakan. Contoh kami akan memungkinkan Anda memasukkan nama, setelah itu halaman akan diperbarui untuk memberi Anda salam yang dipersonalisasi. Keadaan ini juga akan bertahan di seluruh pemuatan ulang halaman/browser, karena nama tersebut disimpan di penyimpanan web

Anda dapat menemukan contoh HTML di salam pribadi. html — ini berisi situs web dengan header, konten, dan footer, serta formulir untuk memasukkan nama Anda

Mari kita bangun contohnya, sehingga Anda dapat memahami cara kerjanya

1. Pertama, buat salinan lokal salam pribadi kami. html di direktori baru di komputer Anda
2. Selanjutnya, perhatikan bagaimana HTML kita mereferensikan file JavaScript bernama

   localStorage.setItem("name", "Chris");
   let myName = localStorage.getItem("name");
   myName;
   

   9, dengan baris seperti

   let myName = localStorage.getItem("name");
   myName;
   

   0. Kita perlu membuat ini dan menulis kode JavaScript kita ke dalamnya. Buat file

   localStorage.setItem("name", "Chris");
   let myName = localStorage.getItem("name");
   myName;
   

   _9 di direktori yang sama dengan file HTML Anda
3. Kita akan memulai dengan membuat referensi ke semua fitur HTML yang perlu kita manipulasi dalam contoh ini — kita akan membuat semuanya sebagai konstanta, karena referensi ini tidak perlu diubah dalam siklus hidup aplikasi. Tambahkan baris berikut ke file JavaScript Anda

   // create needed constants
   const rememberDiv = document.querySelector(".remember");
   const forgetDiv = document.querySelector(".forget");
   const form = document.querySelector("form");
   const nameInput = document.querySelector("#entername");
   const submitBtn = document.querySelector("#submitname");
   const forgetBtn = document.querySelector("#forgetname");
   
   const h1 = document.querySelector("h1");
   const personalGreeting = document.querySelector(".personal-greeting");
   

4. Selanjutnya, kita perlu menyertakan pendengar acara kecil untuk menghentikan formulir agar tidak benar-benar mengirimkan dirinya sendiri saat tombol kirim ditekan, karena ini bukan perilaku yang kita inginkan. Tambahkan cuplikan ini di bawah kode Anda sebelumnya

   // Stop the form from submitting when a button is pressed
   form.addEventListener("submit", (e) => e.preventDefault());
   

5. Sekarang kita perlu menambahkan event listener, yang fungsi handler-nya akan berjalan saat tombol "Say hello" diklik. Komentar menjelaskan secara rinci apa yang dilakukan setiap bit, tetapi intinya di sini kita mengambil nama pengguna yang telah dimasukkan ke dalam kotak input teks dan menyimpannya di penyimpanan web menggunakan

   let myName = localStorage.getItem("name");
   myName;
   

   2, kemudian menjalankan fungsi yang disebut

   let myName = localStorage.getItem("name");
   myName;
   

   3 yang akan menangani pembaruan situs web yang sebenarnya . Tambahkan ini ke bagian bawah kode Anda

   // run function when the 'Say hello' button is clicked
   submitBtn.addEventListener("click", () => {
     // store the entered name in web storage
     localStorage.setItem("name", nameInput.value);
     // run nameDisplayCheck() to sort out displaying the personalized greetings and updating the form display
     nameDisplayCheck();
   });
   

6. Pada titik ini kita juga memerlukan event handler untuk menjalankan fungsi ketika tombol "Lupakan" diklik — ini hanya ditampilkan setelah tombol "Sapa halo" diklik (kedua status formulir beralih bolak-balik). Dalam fungsi ini kami menghapus item

   localStorage.setItem("name", "Chris");
   let myName = localStorage.getItem("name");
   myName;
   

   _4 dari penyimpanan web menggunakan

   let myName = localStorage.getItem("name");
   myName;
   

   5, lalu jalankan lagi

   let myName = localStorage.getItem("name");
   myName;
   

   3 untuk memperbarui tampilan. Tambahkan ini ke bawah

   // run function when the 'Forget' button is clicked
   forgetBtn.addEventListener("click", () => {
     // Remove the stored name from web storage
     localStorage.removeItem("name");
     // run nameDisplayCheck() to sort out displaying the generic greeting again and updating the form display
     nameDisplayCheck();
   });
   

7. Sekarang waktunya untuk mendefinisikan fungsi ________6______3 itu sendiri. Di sini kami memeriksa apakah item nama telah disimpan di penyimpanan web dengan menggunakan

   let myName = localStorage.getItem("name");
   myName;
   

   8 sebagai uji kondisional. Jika nama telah disimpan, panggilan ini akan dievaluasi menjadi

   let myName = localStorage.getItem("name");
   myName;
   

   9; . Jika panggilan bernilai

   let myName = localStorage.getItem("name");
   myName;
   

   _9, kami menampilkan salam yang dipersonalisasi, menampilkan bagian "lupakan" pada formulir, dan menyembunyikan bagian "Sapa halo" pada formulir. Jika panggilan bernilai

   // create needed constants
   const rememberDiv = document.querySelector(".remember");
   const forgetDiv = document.querySelector(".forget");
   const form = document.querySelector("form");
   const nameInput = document.querySelector("#entername");
   const submitBtn = document.querySelector("#submitname");
   const forgetBtn = document.querySelector("#forgetname");
   
   const h1 = document.querySelector("h1");
   const personalGreeting = document.querySelector(".personal-greeting");
   

   _0, kami menampilkan sapaan umum dan melakukan sebaliknya. Sekali lagi, letakkan kode berikut di bagian bawah

   // define the nameDisplayCheck() function
   function nameDisplayCheck() {
     // check whether the 'name' data item is stored in web Storage
     if (localStorage.getItem("name")) {
       // If it is, display personalized greeting
       const name = localStorage.getItem("name");
       h1.textContent = `Welcome, ${name}`;
       personalGreeting.textContent = `Welcome to our website, ${name}! We hope you have fun while you are here.`;
       // hide the 'remember' part of the form and show the 'forget' part
       forgetDiv.style.display = "block";
       rememberDiv.style.display = "none";
     } else {
       // if not, display generic greeting
       h1.textContent = "Welcome to our website ";
       personalGreeting.textContent =
         "Welcome to our website. We hope you have fun while you are here.";
       // hide the 'forget' part of the form and show the 'remember' part
       forgetDiv.style.display = "none";
       rememberDiv.style.display = "block";
     }
   }
   

8. Last but not least, kita perlu menjalankan fungsi

   let myName = localStorage.getItem("name");
   myName;
   

   3 saat halaman dimuat. Jika kami tidak melakukan ini, salam yang dipersonalisasi tidak akan bertahan selama pemuatan ulang halaman. Tambahkan yang berikut ke bagian bawah kode Anda

   let myName = localStorage.getItem("name");
   myName;
   

   _0

Teladan Anda sudah selesai — bagus sekali. Yang tersisa sekarang hanyalah menyimpan kode Anda dan menguji halaman HTML Anda di browser. Anda dapat melihat versi selesai kami berjalan langsung di sini

Catatan. Ada contoh lain yang sedikit lebih rumit untuk dijelajahi di Using the Web Storage API

Catatan. Di baris

let myName = localStorage.getItem("name");
myName;

// create needed constants
const rememberDiv = document.querySelector(".remember");
const forgetDiv = document.querySelector(".forget");
const form = document.querySelector("form");
const nameInput = document.querySelector("#entername");
const submitBtn = document.querySelector("#submitname");
const forgetBtn = document.querySelector("#forgetname");

const h1 = document.querySelector("h1");
const personalGreeting = document.querySelector(".personal-greeting");

// create needed constants
const rememberDiv = document.querySelector(".remember");
const forgetDiv = document.querySelector(".forget");
const form = document.querySelector("form");
const nameInput = document.querySelector("#entername");
const submitBtn = document.querySelector("#submitname");
const forgetBtn = document.querySelector("#forgetname");

const h1 = document.querySelector("h1");
const personalGreeting = document.querySelector(".personal-greeting");

IndexedDB API (terkadang disingkat IDB) adalah sistem database lengkap yang tersedia di browser tempat Anda dapat menyimpan data terkait yang kompleks, yang jenisnya tidak terbatas pada nilai sederhana seperti string atau angka. Anda dapat menyimpan video, gambar, dan hampir semua hal lainnya dalam instance IndexedDB

IndexedDB API memungkinkan Anda membuat database, lalu membuat penyimpanan objek di dalam database tersebut. Penyimpanan objek seperti tabel dalam database relasional, dan setiap penyimpanan objek dapat berisi sejumlah objek. Untuk mempelajari lebih lanjut tentang IndexedDB API, lihat Menggunakan IndexedDB

Namun, ini memang harus dibayar mahal. IndexedDB jauh lebih kompleks untuk digunakan daripada Web Storage API. Di bagian ini, kami benar-benar hanya akan menggores permukaan kemampuannya, tetapi kami akan memberi Anda cukup untuk memulai

Di sini kami akan memandu Anda melalui contoh yang memungkinkan Anda menyimpan catatan di browser dan melihat serta menghapusnya kapan pun Anda suka, membuat Anda membuatnya sendiri dan menjelaskan bagian paling mendasar dari IDB seiring berjalannya waktu

Aplikasinya terlihat seperti ini

Setiap catatan memiliki judul dan beberapa teks isi, masing-masing dapat diedit secara individual. Kode JavaScript yang akan kita bahas di bawah ini memiliki komentar mendetail untuk membantu Anda memahami apa yang sedang terjadi

1. Pertama-tama, buat salinan lokal dari file

   // create needed constants
   const rememberDiv = document.querySelector(".remember");
   const forgetDiv = document.querySelector(".forget");
   const form = document.querySelector("form");
   const nameInput = document.querySelector("#entername");
   const submitBtn = document.querySelector("#submitname");
   const forgetBtn = document.querySelector("#forgetname");
   
   const h1 = document.querySelector("h1");
   const personalGreeting = document.querySelector(".personal-greeting");
   

   _7,

   // create needed constants
   const rememberDiv = document.querySelector(".remember");
   const forgetDiv = document.querySelector(".forget");
   const form = document.querySelector("form");
   const nameInput = document.querySelector("#entername");
   const submitBtn = document.querySelector("#submitname");
   const forgetBtn = document.querySelector("#forgetname");
   
   const h1 = document.querySelector("h1");
   const personalGreeting = document.querySelector(".personal-greeting");
   

   8, dan

   // create needed constants
   const rememberDiv = document.querySelector(".remember");
   const forgetDiv = document.querySelector(".forget");
   const form = document.querySelector("form");
   const nameInput = document.querySelector("#entername");
   const submitBtn = document.querySelector("#submitname");
   const forgetBtn = document.querySelector("#forgetname");
   
   const h1 = document.querySelector("h1");
   const personalGreeting = document.querySelector(".personal-greeting");
   

   9 kami ke direktori baru di mesin lokal Anda
2. Lihat file-filenya. Anda akan melihat bahwa HTML mendefinisikan situs web dengan header dan footer, serta area konten utama yang berisi tempat untuk menampilkan catatan, dan formulir untuk memasukkan catatan baru ke dalam database. CSS menyediakan beberapa gaya untuk memperjelas apa yang sedang terjadi. File JavaScript berisi lima konstanta yang dideklarasikan yang berisi referensi ke elemen

   // Stop the form from submitting when a button is pressed
   form.addEventListener("submit", (e) => e.preventDefault());
   

   0 catatan akan ditampilkan, judul dan isi

   // Stop the form from submitting when a button is pressed
   form.addEventListener("submit", (e) => e.preventDefault());
   

   1 elemen,

   // Stop the form from submitting when a button is pressed
   form.addEventListener("submit", (e) => e.preventDefault());
   

   2 itu sendiri, dan

   // Stop the form from submitting when a button is pressed
   form.addEventListener("submit", (e) => e.preventDefault());
   

   3
3. Ganti nama file JavaScript Anda menjadi

   localStorage.setItem("name", "Chris");
   let myName = localStorage.getItem("name");
   myName;
   

   9. Anda sekarang siap untuk mulai menambahkan kode ke dalamnya

Sekarang mari kita lihat apa yang pertama-tama harus kita lakukan, untuk benar-benar menyiapkan database

1. Di bawah deklarasi konstanta, tambahkan baris berikut

   let myName = localStorage.getItem("name");
   myName;
   

   _1
   Di sini kita mendeklarasikan variabel yang disebut

   // Stop the form from submitting when a button is pressed
   form.addEventListener("submit", (e) => e.preventDefault());
   

   5 — ini nantinya akan digunakan untuk menyimpan objek yang mewakili database kita. Kami akan menggunakan ini di beberapa tempat, jadi kami telah mendeklarasikannya secara global di sini untuk mempermudah
2. Selanjutnya, tambahkan berikut ini

   let myName = localStorage.getItem("name");
   myName;
   

   _2
   Baris ini membuat permintaan untuk membuka versi

   // Stop the form from submitting when a button is pressed
   form.addEventListener("submit", (e) => e.preventDefault());
   

   6 dari database bernama

   // Stop the form from submitting when a button is pressed
   form.addEventListener("submit", (e) => e.preventDefault());
   

   7. Jika ini belum ada, itu akan dibuat untuk Anda dengan kode berikutnya. Anda akan melihat pola permintaan ini sangat sering digunakan di seluruh IndexedDB. Operasi basis data membutuhkan waktu. Anda tidak ingin menggantung browser saat Anda menunggu hasilnya, jadi operasi basis data tidak sinkron, artinya alih-alih terjadi segera, itu akan terjadi di beberapa titik di masa mendatang, dan Anda diberi tahu setelah selesai. Untuk menangani ini di IndexedDB, Anda membuat objek permintaan (yang dapat disebut apa pun yang Anda suka — kami menyebutnya

   // Stop the form from submitting when a button is pressed
   form.addEventListener("submit", (e) => e.preventDefault());
   

   8 di sini, jadi jelas untuk apa itu). Anda kemudian menggunakan event handler untuk menjalankan kode saat permintaan selesai, gagal, dll. , yang akan Anda lihat digunakan di bawah ini

   Catatan. Nomor versi itu penting. Jika Anda ingin memutakhirkan basis data Anda (misalnya, dengan mengubah struktur tabel), Anda harus menjalankan kode Anda lagi dengan nomor versi yang ditingkatkan, skema berbeda yang ditentukan di dalam penangan

   // Stop the form from submitting when a button is pressed
   form.addEventListener("submit", (e) => e.preventDefault());
   

   9 (lihat di bawah), dll. Kami tidak akan membahas pemutakhiran basis data dalam tutorial ini

3. Sekarang tambahkan penangan acara berikut tepat di bawah penambahan Anda sebelumnya

   let myName = localStorage.getItem("name");
   myName;
   

   _3
   Event handler

   // run function when the 'Say hello' button is clicked
   submitBtn.addEventListener("click", () => {
     // store the entered name in web storage
     localStorage.setItem("name", nameInput.value);
     // run nameDisplayCheck() to sort out displaying the personalized greetings and updating the form display
     nameDisplayCheck();
   });
   

   0 akan berjalan jika sistem kembali mengatakan bahwa permintaan gagal. Ini memungkinkan Anda untuk menanggapi masalah ini. Dalam contoh kami, kami hanya mencetak pesan ke konsol JavaScript. Event handler

   // run function when the 'Say hello' button is clicked
   submitBtn.addEventListener("click", () => {
     // store the entered name in web storage
     localStorage.setItem("name", nameInput.value);
     // run nameDisplayCheck() to sort out displaying the personalized greetings and updating the form display
     nameDisplayCheck();
   });
   

   1 akan berjalan jika request berhasil kembali, artinya database berhasil dibuka. Jika demikian, objek yang mewakili database yang dibuka akan tersedia di properti

   // run function when the 'Say hello' button is clicked
   submitBtn.addEventListener("click", () => {
     // store the entered name in web storage
     localStorage.setItem("name", nameInput.value);
     // run nameDisplayCheck() to sort out displaying the personalized greetings and updating the form display
     nameDisplayCheck();
   });
   

   2, memungkinkan kita untuk memanipulasi database. Kami menyimpan ini di variabel

   // Stop the form from submitting when a button is pressed
   form.addEventListener("submit", (e) => e.preventDefault());
   

   _5 yang kami buat sebelumnya untuk digunakan nanti. Kami juga menjalankan fungsi yang disebut

   // run function when the 'Say hello' button is clicked
   submitBtn.addEventListener("click", () => {
     // store the entered name in web storage
     localStorage.setItem("name", nameInput.value);
     // run nameDisplayCheck() to sort out displaying the personalized greetings and updating the form display
     nameDisplayCheck();
   });
   

   _4, yang menampilkan data dalam database di dalam

   // Stop the form from submitting when a button is pressed
   form.addEventListener("submit", (e) => e.preventDefault());
   

   0. Kami menjalankannya sekarang sehingga catatan yang sudah ada di database ditampilkan segera setelah halaman dimuat. Anda akan melihat

   // run function when the 'Say hello' button is clicked
   submitBtn.addEventListener("click", () => {
     // store the entered name in web storage
     localStorage.setItem("name", nameInput.value);
     // run nameDisplayCheck() to sort out displaying the personalized greetings and updating the form display
     nameDisplayCheck();
   });
   

   _4 ditentukan nanti
4. Terakhir untuk bagian ini, kami akan menambahkan event handler yang mungkin paling penting untuk menyiapkan database.

   // Stop the form from submitting when a button is pressed
   form.addEventListener("submit", (e) => e.preventDefault());
   

   _9. Penangan ini berjalan jika basis data belum disiapkan, atau jika basis data dibuka dengan nomor versi yang lebih besar dari basis data tersimpan yang ada (saat melakukan pemutakhiran). Tambahkan kode berikut, di bawah penangan Anda sebelumnya

   let myName = localStorage.getItem("name");
   myName;
   

   _4
   Di sinilah kami mendefinisikan skema (struktur) database kami; . Di sini pertama-tama kita mengambil referensi ke database yang ada dari properti

   // run function when the 'Say hello' button is clicked
   submitBtn.addEventListener("click", () => {
     // store the entered name in web storage
     localStorage.setItem("name", nameInput.value);
     // run nameDisplayCheck() to sort out displaying the personalized greetings and updating the form display
     nameDisplayCheck();
   });
   

   8 dari target acara (

   // run function when the 'Say hello' button is clicked
   submitBtn.addEventListener("click", () => {
     // store the entered name in web storage
     localStorage.setItem("name", nameInput.value);
     // run nameDisplayCheck() to sort out displaying the personalized greetings and updating the form display
     nameDisplayCheck();
   });
   

   9), yang merupakan objek

   // run function when the 'Forget' button is clicked
   forgetBtn.addEventListener("click", () => {
     // Remove the stored name from web storage
     localStorage.removeItem("name");
     // run nameDisplayCheck() to sort out displaying the generic greeting again and updating the form display
     nameDisplayCheck();
   });
   

   0. Ini setara dengan baris

   // run function when the 'Forget' button is clicked
   forgetBtn.addEventListener("click", () => {
     // Remove the stored name from web storage
     localStorage.removeItem("name");
     // run nameDisplayCheck() to sort out displaying the generic greeting again and updating the form display
     nameDisplayCheck();
   });
   

   1 di dalam event handler

   // run function when the 'Say hello' button is clicked
   submitBtn.addEventListener("click", () => {
     // store the entered name in web storage
     localStorage.setItem("name", nameInput.value);
     // run nameDisplayCheck() to sort out displaying the personalized greetings and updating the form display
     nameDisplayCheck();
   });
   

   1, tetapi kita perlu melakukan ini secara terpisah di sini karena event handler

   // Stop the form from submitting when a button is pressed
   form.addEventListener("submit", (e) => e.preventDefault());
   

   9 (jika perlu) akan berjalan sebelum event handler

   // run function when the 'Say hello' button is clicked
   submitBtn.addEventListener("click", () => {
     // store the entered name in web storage
     localStorage.setItem("name", nameInput.value);
     // run nameDisplayCheck() to sort out displaying the personalized greetings and updating the form display
     nameDisplayCheck();
   });
   

   1, artinya nilai

   // Stop the form from submitting when a button is pressed
   form.addEventListener("submit", (e) => e.preventDefault());
   

   5 tidak akan tersedia jika kita . Kami kemudian menggunakan

   // run function when the 'Forget' button is clicked
   forgetBtn.addEventListener("click", () => {
     // Remove the stored name from web storage
     localStorage.removeItem("name");
     // run nameDisplayCheck() to sort out displaying the generic greeting again and updating the form display
     nameDisplayCheck();
   });
   

   6 untuk membuat penyimpanan objek baru di dalam database terbuka kami yang disebut

   // run function when the 'Forget' button is clicked
   forgetBtn.addEventListener("click", () => {
     // Remove the stored name from web storage
     localStorage.removeItem("name");
     // run nameDisplayCheck() to sort out displaying the generic greeting again and updating the form display
     nameDisplayCheck();
   });
   

   7. Ini setara dengan satu tabel dalam sistem basis data konvensional. Kami telah memberinya nama catatan, dan juga menentukan bidang kunci

   // run function when the 'Forget' button is clicked
   forgetBtn.addEventListener("click", () => {
     // Remove the stored name from web storage
     localStorage.removeItem("name");
     // run nameDisplayCheck() to sort out displaying the generic greeting again and updating the form display
     nameDisplayCheck();
   });
   

   8 yang disebut

   // run function when the 'Forget' button is clicked
   forgetBtn.addEventListener("click", () => {
     // Remove the stored name from web storage
     localStorage.removeItem("name");
     // run nameDisplayCheck() to sort out displaying the generic greeting again and updating the form display
     nameDisplayCheck();
   });
   

   9 — di setiap catatan baru ini akan secara otomatis diberi nilai tambahan — pengembang tidak perlu menyetel ini secara eksplisit. Menjadi kuncinya, bidang

   // run function when the 'Forget' button is clicked
   forgetBtn.addEventListener("click", () => {
     // Remove the stored name from web storage
     localStorage.removeItem("name");
     // run nameDisplayCheck() to sort out displaying the generic greeting again and updating the form display
     nameDisplayCheck();
   });
   

   _9 akan digunakan untuk mengidentifikasi rekaman secara unik, seperti saat menghapus atau menampilkan rekaman. Kami juga membuat dua indeks (bidang) lainnya menggunakan metode

   // define the nameDisplayCheck() function
   function nameDisplayCheck() {
     // check whether the 'name' data item is stored in web Storage
     if (localStorage.getItem("name")) {
       // If it is, display personalized greeting
       const name = localStorage.getItem("name");
       h1.textContent = `Welcome, ${name}`;
       personalGreeting.textContent = `Welcome to our website, ${name}! We hope you have fun while you are here.`;
       // hide the 'remember' part of the form and show the 'forget' part
       forgetDiv.style.display = "block";
       rememberDiv.style.display = "none";
     } else {
       // if not, display generic greeting
       h1.textContent = "Welcome to our website ";
       personalGreeting.textContent =
         "Welcome to our website. We hope you have fun while you are here.";
       // hide the 'forget' part of the form and show the 'remember' part
       forgetDiv.style.display = "none";
       rememberDiv.style.display = "block";
     }
   }
   

   1.

   // define the nameDisplayCheck() function
   function nameDisplayCheck() {
     // check whether the 'name' data item is stored in web Storage
     if (localStorage.getItem("name")) {
       // If it is, display personalized greeting
       const name = localStorage.getItem("name");
       h1.textContent = `Welcome, ${name}`;
       personalGreeting.textContent = `Welcome to our website, ${name}! We hope you have fun while you are here.`;
       // hide the 'remember' part of the form and show the 'forget' part
       forgetDiv.style.display = "block";
       rememberDiv.style.display = "none";
     } else {
       // if not, display generic greeting
       h1.textContent = "Welcome to our website ";
       personalGreeting.textContent =
         "Welcome to our website. We hope you have fun while you are here.";
       // hide the 'forget' part of the form and show the 'remember' part
       forgetDiv.style.display = "none";
       rememberDiv.style.display = "block";
     }
   }
   

   2 (yang akan berisi judul untuk setiap catatan), dan

   // define the nameDisplayCheck() function
   function nameDisplayCheck() {
     // check whether the 'name' data item is stored in web Storage
     if (localStorage.getItem("name")) {
       // If it is, display personalized greeting
       const name = localStorage.getItem("name");
       h1.textContent = `Welcome, ${name}`;
       personalGreeting.textContent = `Welcome to our website, ${name}! We hope you have fun while you are here.`;
       // hide the 'remember' part of the form and show the 'forget' part
       forgetDiv.style.display = "block";
       rememberDiv.style.display = "none";
     } else {
       // if not, display generic greeting
       h1.textContent = "Welcome to our website ";
       personalGreeting.textContent =
         "Welcome to our website. We hope you have fun while you are here.";
       // hide the 'forget' part of the form and show the 'remember' part
       forgetDiv.style.display = "none";
       rememberDiv.style.display = "block";
     }
   }
   

   3 (yang akan berisi teks isi catatan)

Jadi dengan pengaturan skema database ini, saat kita mulai menambahkan record ke database, masing-masing record akan direpresentasikan sebagai objek di sepanjang baris ini

let myName = localStorage.getItem("name");
myName;

Sekarang mari kita lihat bagaimana kita dapat menambahkan record ke database. Ini akan dilakukan dengan menggunakan formulir di halaman kami

Di bawah event handler Anda sebelumnya, tambahkan baris berikut, yang menyiapkan

// define the nameDisplayCheck() function
function nameDisplayCheck() {
  // check whether the 'name' data item is stored in web Storage
  if (localStorage.getItem("name")) {
    // If it is, display personalized greeting
    const name = localStorage.getItem("name");
    h1.textContent = `Welcome, ${name}`;
    personalGreeting.textContent = `Welcome to our website, ${name}! We hope you have fun while you are here.`;
    // hide the 'remember' part of the form and show the 'forget' part
    forgetDiv.style.display = "block";
    rememberDiv.style.display = "none";
  } else {
    // if not, display generic greeting
    h1.textContent = "Welcome to our website ";
    personalGreeting.textContent =
      "Welcome to our website. We hope you have fun while you are here.";
    // hide the 'forget' part of the form and show the 'remember' part
    forgetDiv.style.display = "none";
    rememberDiv.style.display = "block";
  }
}

// define the nameDisplayCheck() function
function nameDisplayCheck() {
  // check whether the 'name' data item is stored in web Storage
  if (localStorage.getItem("name")) {
    // If it is, display personalized greeting
    const name = localStorage.getItem("name");
    h1.textContent = `Welcome, ${name}`;
    personalGreeting.textContent = `Welcome to our website, ${name}! We hope you have fun while you are here.`;
    // hide the 'remember' part of the form and show the 'forget' part
    forgetDiv.style.display = "block";
    rememberDiv.style.display = "none";
  } else {
    // if not, display generic greeting
    h1.textContent = "Welcome to our website ";
    personalGreeting.textContent =
      "Welcome to our website. We hope you have fun while you are here.";
    // hide the 'forget' part of the form and show the 'remember' part
    forgetDiv.style.display = "none";
    rememberDiv.style.display = "block";
  }
}

// Stop the form from submitting when a button is pressed
form.addEventListener("submit", (e) => e.preventDefault());

let myName = localStorage.getItem("name");
myName;

Sekarang mari kita definisikan fungsi

// define the nameDisplayCheck() function
function nameDisplayCheck() {
  // check whether the 'name' data item is stored in web Storage
  if (localStorage.getItem("name")) {
    // If it is, display personalized greeting
    const name = localStorage.getItem("name");
    h1.textContent = `Welcome, ${name}`;
    personalGreeting.textContent = `Welcome to our website, ${name}! We hope you have fun while you are here.`;
    // hide the 'remember' part of the form and show the 'forget' part
    forgetDiv.style.display = "block";
    rememberDiv.style.display = "none";
  } else {
    // if not, display generic greeting
    h1.textContent = "Welcome to our website ";
    personalGreeting.textContent =
      "Welcome to our website. We hope you have fun while you are here.";
    // hide the 'forget' part of the form and show the 'remember' part
    forgetDiv.style.display = "none";
    rememberDiv.style.display = "block";
  }
}

let myName = localStorage.getItem("name");
myName;

Ini cukup rumit;

• Jalankan

  // define the nameDisplayCheck() function
  function nameDisplayCheck() {
    // check whether the 'name' data item is stored in web Storage
    if (localStorage.getItem("name")) {
      // If it is, display personalized greeting
      const name = localStorage.getItem("name");
      h1.textContent = `Welcome, ${name}`;
      personalGreeting.textContent = `Welcome to our website, ${name}! We hope you have fun while you are here.`;
      // hide the 'remember' part of the form and show the 'forget' part
      forgetDiv.style.display = "block";
      rememberDiv.style.display = "none";
    } else {
      // if not, display generic greeting
      h1.textContent = "Welcome to our website ";
      personalGreeting.textContent =
        "Welcome to our website. We hope you have fun while you are here.";
      // hide the 'forget' part of the form and show the 'remember' part
      forgetDiv.style.display = "none";
      rememberDiv.style.display = "block";
    }
  }
  

  _8 pada objek acara untuk menghentikan formulir yang sebenarnya dikirimkan dengan cara konvensional (ini akan menyebabkan penyegaran halaman dan merusak pengalaman)
• Buat objek yang mewakili rekaman untuk dimasukkan ke dalam database, isi dengan nilai dari input formulir. Perhatikan bahwa kita tidak harus secara eksplisit menyertakan nilai

  // run function when the 'Forget' button is clicked
  forgetBtn.addEventListener("click", () => {
    // Remove the stored name from web storage
    localStorage.removeItem("name");
    // run nameDisplayCheck() to sort out displaying the generic greeting again and updating the form display
    nameDisplayCheck();
  });
  

  9 — seperti yang telah kita jelaskan sebelumnya, ini diisi secara otomatis
• Buka transaksi

  let myName = localStorage.getItem("name");
  myName;
  

  _00 terhadap toko objek

  // run function when the 'Forget' button is clicked
  forgetBtn.addEventListener("click", () => {
    // Remove the stored name from web storage
    localStorage.removeItem("name");
    // run nameDisplayCheck() to sort out displaying the generic greeting again and updating the form display
    nameDisplayCheck();
  });
  

  7 menggunakan metode

  let myName = localStorage.getItem("name");
  myName;
  

  02. Objek transaksi ini memungkinkan kita untuk mengakses penyimpanan objek sehingga kita dapat melakukan sesuatu padanya, mis. g. menambah rekor baru
• Akses penyimpanan objek menggunakan metode

  let myName = localStorage.getItem("name");
  myName;
  

  03, simpan hasilnya dalam variabel

  let myName = localStorage.getItem("name");
  myName;
  

  04
• Tambahkan record baru ke database menggunakan

  let myName = localStorage.getItem("name");
  myName;
  

  05. Ini membuat objek permintaan, dengan cara yang sama seperti yang telah kita lihat sebelumnya
• Tambahkan sekelompok penangan peristiwa ke objek

  // run function when the 'Forget' button is clicked
  forgetBtn.addEventListener("click", () => {
    // Remove the stored name from web storage
    localStorage.removeItem("name");
    // run nameDisplayCheck() to sort out displaying the generic greeting again and updating the form display
    nameDisplayCheck();
  });
  

  0 dan

  let myName = localStorage.getItem("name");
  myName;
  

  07 untuk menjalankan kode pada titik kritis dalam siklus hidup. Setelah permintaan berhasil, kami menghapus input formulir yang siap untuk memasukkan catatan berikutnya. Setelah transaksi selesai, kami menjalankan fungsi

  // run function when the 'Say hello' button is clicked
  submitBtn.addEventListener("click", () => {
    // store the entered name in web storage
    localStorage.setItem("name", nameInput.value);
    // run nameDisplayCheck() to sort out displaying the personalized greetings and updating the form display
    nameDisplayCheck();
  });
  

  4 lagi untuk memperbarui tampilan catatan di halaman

Kami telah mereferensikan

// run function when the 'Say hello' button is clicked
submitBtn.addEventListener("click", () => {
  // store the entered name in web storage
  localStorage.setItem("name", nameInput.value);
  // run nameDisplayCheck() to sort out displaying the personalized greetings and updating the form display
  nameDisplayCheck();
});

let myName = localStorage.getItem("name");
myName;

Sekali lagi, mari kita pecahkan ini

• Pertama, kami mengosongkan konten elemen

  // Stop the form from submitting when a button is pressed
  form.addEventListener("submit", (e) => e.preventDefault());
  

  _0, sebelum mengisinya dengan konten yang diperbarui. Jika Anda tidak melakukan ini, Anda akan berakhir dengan daftar besar konten duplikat yang ditambahkan dengan setiap pembaruan
• Selanjutnya, kita mendapatkan referensi ke toko objek

  // run function when the 'Forget' button is clicked
  forgetBtn.addEventListener("click", () => {
    // Remove the stored name from web storage
    localStorage.removeItem("name");
    // run nameDisplayCheck() to sort out displaying the generic greeting again and updating the form display
    nameDisplayCheck();
  });
  

  _7 menggunakan

  let myName = localStorage.getItem("name");
  myName;
  

  02 dan

  let myName = localStorage.getItem("name");
  myName;
  

  03 seperti yang kita lakukan di

  // define the nameDisplayCheck() function
  function nameDisplayCheck() {
    // check whether the 'name' data item is stored in web Storage
    if (localStorage.getItem("name")) {
      // If it is, display personalized greeting
      const name = localStorage.getItem("name");
      h1.textContent = `Welcome, ${name}`;
      personalGreeting.textContent = `Welcome to our website, ${name}! We hope you have fun while you are here.`;
      // hide the 'remember' part of the form and show the 'forget' part
      forgetDiv.style.display = "block";
      rememberDiv.style.display = "none";
    } else {
      // if not, display generic greeting
      h1.textContent = "Welcome to our website ";
      personalGreeting.textContent =
        "Welcome to our website. We hope you have fun while you are here.";
      // hide the 'forget' part of the form and show the 'remember' part
      forgetDiv.style.display = "none";
      rememberDiv.style.display = "block";
    }
  }
  

  5, kecuali di sini kita merantai mereka bersama dalam satu baris
• Langkah selanjutnya adalah menggunakan metode

  let myName = localStorage.getItem("name");
  myName;
  

  _15 untuk membuka permintaan kursor — ini adalah konstruksi yang dapat digunakan untuk mengulangi rekaman di penyimpanan objek. Kami merangkai event handler

  // run function when the 'Say hello' button is clicked
  submitBtn.addEventListener("click", () => {
    // store the entered name in web storage
    localStorage.setItem("name", nameInput.value);
    // run nameDisplayCheck() to sort out displaying the personalized greetings and updating the form display
    nameDisplayCheck();
  });
  

  1 ke akhir baris ini untuk membuat kode lebih ringkas — saat kursor berhasil dikembalikan, handler dijalankan
• Kami mendapatkan referensi ke kursor itu sendiri (objek

  let myName = localStorage.getItem("name");
  myName;
  

  17) menggunakan

  let myName = localStorage.getItem("name");
  myName;
  

  18
• Selanjutnya, kita memeriksa apakah kursor berisi record dari datastore (

  let myName = localStorage.getItem("name");
  myName;
  

  19) — jika demikian, kita membuat fragmen DOM, mengisinya dengan data dari record, dan memasukkannya ke dalam halaman (di dalam elemen

  // Stop the form from submitting when a button is pressed
  form.addEventListener("submit", (e) => e.preventDefault());
  

  0). Kami juga menyertakan tombol hapus yang, ketika diklik, akan menghapus catatan itu dengan menjalankan fungsi

  let myName = localStorage.getItem("name");
  myName;
  

  21, yang akan kita lihat di bagian selanjutnya
• Di akhir blok

  let myName = localStorage.getItem("name");
  myName;
  

  _22, kami menggunakan metode

  let myName = localStorage.getItem("name");
  myName;
  

  23 untuk memajukan kursor ke record berikutnya di datastore, dan menjalankan konten blok

  let myName = localStorage.getItem("name");
  myName;
  

  22 lagi. Jika ada catatan lain untuk diulangi, ini menyebabkannya dimasukkan ke dalam halaman, lalu

  let myName = localStorage.getItem("name");
  myName;
  

  25 dijalankan lagi, dan seterusnya
• Ketika tidak ada lagi catatan untuk diulang,

  let myName = localStorage.getItem("name");
  myName;
  

  26 akan mengembalikan

  let myName = localStorage.getItem("name");
  myName;
  

  27, dan oleh karena itu blok

  let myName = localStorage.getItem("name");
  myName;
  

  28 akan berjalan sebagai ganti blok

  let myName = localStorage.getItem("name");
  myName;
  

  22. Blok ini memeriksa apakah ada catatan yang dimasukkan ke dalam

  // Stop the form from submitting when a button is pressed
  form.addEventListener("submit", (e) => e.preventDefault());
  

  0 — jika tidak, ini memasukkan pesan untuk mengatakan tidak ada catatan yang disimpan

Sebagaimana dinyatakan di atas, saat tombol hapus catatan ditekan, catatan tersebut dihapus. Ini dicapai dengan fungsi

let myName = localStorage.getItem("name");
myName;

let myName = localStorage.getItem("name");
myName;

• Bagian pertama dari ini dapat menggunakan beberapa penjelasan — kami mengambil ID catatan yang akan dihapus menggunakan

  let myName = localStorage.getItem("name");
  myName;
  

  32 — ingat bahwa ID catatan disimpan dalam atribut

  let myName = localStorage.getItem("name");
  myName;
  

  33 pada

  let myName = localStorage.getItem("name");
  myName;
  

  34 saat pertama kali ditampilkan. Namun kami perlu meneruskan atribut melalui objek

  let myName = localStorage.getItem("name");
  myName;
  

  35 bawaan global karena merupakan string tipe data, dan oleh karena itu tidak akan dikenali oleh database, yang mengharapkan angka
• Kami kemudian mendapatkan referensi ke penyimpanan objek menggunakan pola yang sama yang telah kami lihat sebelumnya, dan menggunakan metode

  let myName = localStorage.getItem("name");
  myName;
  

  36 untuk menghapus catatan dari database, meneruskannya ID
• Saat transaksi basis data selesai, kami menghapus

  let myName = localStorage.getItem("name");
  myName;
  

  34 catatan dari DOM, dan sekali lagi melakukan pemeriksaan untuk melihat apakah

  // Stop the form from submitting when a button is pressed
  form.addEventListener("submit", (e) => e.preventDefault());
  

  0 sekarang kosong, memasukkan catatan yang sesuai

Jadi begitulah. Contoh Anda sekarang seharusnya berfungsi

Jika Anda mengalami masalah dengan itu, jangan ragu untuk memeriksanya dengan contoh langsung kami (lihat juga kode sumbernya)

Seperti yang kami sebutkan di atas, IndexedDB dapat digunakan untuk menyimpan lebih dari sekadar string teks. Anda dapat menyimpan apa saja yang Anda inginkan, termasuk objek kompleks seperti gumpalan video atau gambar. Dan itu tidak jauh lebih sulit untuk dicapai daripada jenis data lainnya

Untuk mendemonstrasikan cara melakukannya, kami telah menulis contoh lain yang disebut penyimpanan video IndexedDB (lihat juga berjalan langsung di sini). Ketika Anda pertama kali menjalankan contoh, itu mengunduh semua video dari jaringan, menyimpannya dalam database IndexedDB, dan kemudian menampilkan video di UI di dalam elemen

let myName = localStorage.getItem("name");
myName;

Mari telusuri bagian paling menarik dari contoh ini. Kami tidak akan melihat semuanya — banyak yang mirip dengan contoh sebelumnya, dan kodenya dikomentari dengan baik

1. Untuk contoh ini, kami telah menyimpan nama video untuk diambil dalam array objek

   localStorage.removeItem("name");
   myName = localStorage.getItem("name");
   myName;
   

   0

2. Untuk memulainya, setelah database berhasil dibuka, kami menjalankan fungsi

   let myName = localStorage.getItem("name");
   myName;
   

   40. Ini mengulang melalui nama video yang berbeda, mencoba memuat catatan yang diidentifikasi oleh setiap nama dari database

   let myName = localStorage.getItem("name");
   myName;
   

   41. Jika setiap video ditemukan dalam basis data (diperiksa dengan melihat apakah

   let myName = localStorage.getItem("name");
   myName;
   

   42 dievaluasi menjadi

   let myName = localStorage.getItem("name");
   myName;
   

   9 — jika rekaman tidak ada, itu akan menjadi

   let myName = localStorage.getItem("name");
   myName;
   

   27), file videonya (disimpan sebagai blob) dan nama video diteruskan langsung ke fungsi

   let myName = localStorage.getItem("name");
   myName;
   

   45 . Jika tidak, nama video diteruskan ke fungsi

   let myName = localStorage.getItem("name");
   myName;
   

   46, Anda dapat menebaknya, mengambil video dari jaringan

   localStorage.removeItem("name");
   myName = localStorage.getItem("name");
   myName;
   

   _1

3. Cuplikan berikut diambil dari dalam

   let myName = localStorage.getItem("name");
   myName;
   

   _46 — di sini kami mengambil video versi MP4 dan WebM menggunakan dua permintaan

   let myName = localStorage.getItem("name");
   myName;
   

   48 terpisah. Kami kemudian menggunakan metode

   let myName = localStorage.getItem("name");
   myName;
   

   _49 untuk mengekstrak setiap isi respons sebagai blob, memberi kami representasi objek dari video yang dapat disimpan dan ditampilkan nanti. Namun kami memiliki masalah di sini — kedua permintaan ini sama-sama asinkron, tetapi kami hanya ingin mencoba menampilkan atau menyimpan video ketika kedua janji telah terpenuhi. Untungnya ada metode bawaan yang menangani masalah seperti itu —

   let myName = localStorage.getItem("name");
   myName;
   

   50. Ini membutuhkan satu argumen — referensi ke semua janji individu yang ingin Anda periksa pemenuhannya ditempatkan dalam larik — dan mengembalikan janji yang dipenuhi ketika semua janji individu dipenuhi. Di dalam penangan

   let myName = localStorage.getItem("name");
   myName;
   

   _51 untuk janji ini, kami memanggil fungsi

   let myName = localStorage.getItem("name");
   myName;
   

   _45 seperti yang kami lakukan sebelumnya untuk menampilkan video di UI, lalu kami juga memanggil fungsi

   let myName = localStorage.getItem("name");
   myName;
   

   53 untuk menyimpan video tersebut di dalam database

   localStorage.removeItem("name");
   myName = localStorage.getItem("name");
   myName;
   

   _2

4. Mari kita lihat

   let myName = localStorage.getItem("name");
   myName;
   

   _53 terlebih dahulu. Ini sangat mirip dengan pola yang Anda lihat pada contoh sebelumnya untuk menambahkan data ke database — kita membuka transaksi

   let myName = localStorage.getItem("name");
   myName;
   

   00 dan mendapatkan referensi ke penyimpanan objek

   let myName = localStorage.getItem("name");
   myName;
   

   56 kita, membuat objek yang mewakili record untuk ditambahkan ke database, lalu menambahkannya

   localStorage.removeItem("name");
   myName = localStorage.getItem("name");
   myName;
   

   _3

5. Terakhir, kami memiliki

   let myName = localStorage.getItem("name");
   myName;
   

   _45, yang membuat elemen DOM yang diperlukan untuk menyisipkan video di UI, lalu menambahkannya ke halaman. Bagian paling menarik dari ini adalah yang ditunjukkan di bawah — untuk benar-benar menampilkan blob video kita dalam elemen

   let myName = localStorage.getItem("name");
   myName;
   

   39, kita perlu membuat URL objek (URL internal yang mengarah ke blob video yang disimpan di memori) menggunakan metode

   let myName = localStorage.getItem("name");
   myName;
   

   60. Setelah selesai, kita dapat menyetel URL objek menjadi nilai atribut

   let myName = localStorage.getItem("name");
   myName;
   

   61 elemen

   let myName = localStorage.getItem("name");
   myName;
   

   62 kita, dan itu berfungsi dengan baik

   localStorage.removeItem("name");
   myName = localStorage.getItem("name");
   myName;
   

   _4

Contoh di atas sudah menunjukkan cara membuat aplikasi yang akan menyimpan aset besar dalam database IndexedDB, sehingga tidak perlu mengunduhnya lebih dari satu kali. Ini sudah merupakan peningkatan besar bagi pengalaman pengguna, tetapi masih ada satu hal yang hilang — file utama HTML, CSS, dan JavaScript masih perlu diunduh setiap kali situs diakses, artinya tidak akan berfungsi jika ada

Di sinilah pekerja Layanan dan API Cache yang terkait erat masuk

Pekerja layanan adalah file JavaScript yang didaftarkan pada asal tertentu (situs web, atau bagian dari situs web di domain tertentu) saat diakses oleh browser. Saat didaftarkan, itu dapat mengontrol halaman yang tersedia di asal itu. Ini dilakukan dengan duduk di antara halaman yang dimuat dan jaringan dan mencegat permintaan jaringan yang ditujukan ke asal tersebut

Ketika mencegat permintaan, ia dapat melakukan apa pun yang Anda inginkan (lihat ), tetapi contoh klasiknya adalah menyimpan tanggapan jaringan secara offline dan kemudian memberikannya sebagai tanggapan atas permintaan alih-alih tanggapan dari jaringan. Akibatnya, ini memungkinkan Anda membuat situs web berfungsi sepenuhnya offline

Cache API adalah mekanisme penyimpanan sisi klien lainnya, dengan sedikit perbedaan — ia dirancang untuk menyimpan tanggapan HTTP, dan bekerja sangat baik dengan pekerja layanan

Mari kita lihat sebuah contoh, untuk memberi Anda sedikit gambaran tentang seperti apa bentuknya. Kami telah membuat versi lain dari contoh toko video yang kami lihat di bagian sebelumnya — fungsinya identik, kecuali bahwa ini juga menyimpan HTML, CSS, dan JavaScript di API Cache melalui pekerja layanan, memungkinkan contoh berjalan offline

Lihat penyimpanan video IndexedDB dengan pekerja layanan berjalan langsung, dan lihat juga kode sumbernya

Mendaftarkan pekerja layanan

Hal pertama yang harus diperhatikan adalah ada sedikit tambahan kode yang ditempatkan di file JavaScript utama (lihat index. js). Pertama, kami melakukan uji deteksi fitur untuk melihat apakah anggota

let myName = localStorage.getItem("name");
myName;

let myName = localStorage.getItem("name");
myName;

let myName = localStorage.getItem("name");
myName;

let myName = localStorage.getItem("name");
myName;

localStorage.removeItem("name");
myName = localStorage.getItem("name");
myName;

Catatan. Jalur yang diberikan ke file

let myName = localStorage.getItem("name");
myName;

let myName = localStorage.getItem("name");
myName;

let myName = localStorage.getItem("name");
myName;

let myName = localStorage.getItem("name");
myName;

Memasang pekerja layanan

Lain kali halaman apa pun di bawah kendali service worker diakses (mis. g. ketika contoh dimuat ulang), service worker diinstal pada halaman tersebut, artinya ia akan mulai mengontrolnya. Saat ini terjadi, peristiwa

let myName = localStorage.getItem("name");
myName;

Mari kita lihat sebuah contoh, di sw. js (pekerja layanan). Anda akan melihat bahwa install listener terdaftar pada

let myName = localStorage.getItem("name");
myName;

let myName = localStorage.getItem("name");
myName;

Di dalam handler ________6______71, kita menggunakan metode

let myName = localStorage.getItem("name");
myName;

Di sinilah kita melihat API Cache beraksi. Kami menggunakan metode

let myName = localStorage.getItem("name");
myName;

localStorage.removeItem("name");
myName = localStorage.getItem("name");
myName;

let myName = localStorage.getItem("name");
myName;

let myName = localStorage.getItem("name");
myName;

localStorage.removeItem("name");
myName = localStorage.getItem("name");
myName;

Itu saja untuk saat ini, instalasi selesai

Menanggapi permintaan lebih lanjut

Dengan pekerja layanan terdaftar dan diinstal pada halaman HTML kami, dan semua aset yang relevan ditambahkan ke cache kami, kami hampir siap untuk pergi. Hanya ada satu hal lagi yang harus dilakukan. tulis beberapa kode untuk menanggapi permintaan jaringan lebih lanjut

Inilah yang dilakukan oleh bit kode kedua di ________6______66. Kami menambahkan pendengar lain ke cakupan global pekerja layanan, yang menjalankan fungsi penangan saat peristiwa

let myName = localStorage.getItem("name");
myName;

Di dalam handler, pertama-tama kita mencatat URL dari aset yang diminta. Kami kemudian memberikan respons khusus untuk permintaan tersebut, menggunakan metode

let myName = localStorage.getItem("name");
myName;

Di dalam blok ini, kami menggunakan

let myName = localStorage.getItem("name");
myName;

let myName = localStorage.getItem("name");
myName;

Jika ditemukan kecocokan, kami mengembalikannya sebagai tanggapan khusus. Jika tidak, kami mengambil () respons dari jaringan dan mengembalikannya

localStorage.removeItem("name");
myName = localStorage.getItem("name");
myName;

Dan itu untuk pekerja layanan kami. Ada lebih banyak hal yang dapat Anda lakukan dengan mereka — untuk detail lebih lanjut, lihat buku masak pekerja layanan. Terima kasih banyak kepada Paul Kinlan untuk artikelnya , yang mengilhami contoh ini

Menguji contoh offline

Untuk menguji contoh pekerja layanan kami, Anda harus memuatnya beberapa kali untuk memastikannya terpasang. Setelah ini selesai, Anda bisa

• Coba cabut jaringan Anda / matikan Wi-Fi Anda
• Pilih File > Work Offline jika Anda menggunakan Firefox
• Buka devtools, lalu pilih Application > Service Worker, lalu centang kotak Offline jika Anda menggunakan Chrome

Jika Anda me-refresh halaman contoh Anda lagi, Anda akan tetap melihatnya memuat dengan baik. Semuanya disimpan secara offline — aset halaman dalam cache, dan video dalam database IndexedDB

Bagaimana cara menemukan file JavaScript?

Bagaimana file JavaScript disimpan?

Di mana Chrome menyimpan. file JS?

Apakah saya boleh menghapus file JavaScript?