JavaScript adalah salah satu bahasa pemrograman paling populer, terutama karena ia menangani front-end situs web saat berjalan di dalam browser. Dengan kemajuan dalam standar web, kami telah menggunakannya untuk menyelesaikan lebih banyak tugas yang sebelumnya sangat sulit atau tidak mungkin dilakukan hanya dengan JavaScript
Dalam tutorial ini, Anda akan belajar cara membuat dan menyimpan file dengan JavaScript. Kami akan membahas tiga teknik berbeda yang dapat Anda gunakan untuk melakukannya
Menggunakan URL Data untuk Menyimpan File
Cara termudah untuk menyimpan file adalah dengan menggunakan URL Data yang menyertakan semua informasi yang relevan. URL data ini adalah URL khusus yang diawali dengan skema data:[<mediatype>][;base64],<data> 19. Mereka ideal untuk menyematkan file kecil di dokumen HTML Anda. URL ini mengikuti sintaks berikut
1data:[<mediatype>][;base64],<data>
Token data:[<mediatype>][;base64],<data> 20 sebenarnya adalah tipe MIME yang menentukan sifat dan format dokumen atau file. Nilai standarnya adalah data:[<mediatype>][;base64],<data> _21. Token data:[<mediatype>][;base64],<data> 22 bersifat opsional dan diperlukan hanya jika Anda ingin menyimpan data biner secara tekstual. Kami menentukan data aktual kami setelah semua token ini
Kita dapat menggunakan atribut data:[<mediatype>][;base64],<data> _23 untuk menentukan nama file tempat kita ingin meletakkan semua konten kita setelah diunduh. Berikut adalah contoh penggunaan semua atribut ini secara bersamaan
1<a download="monty.txt" href="data:text/plain;charset=utf-8,My name is Monty.">Download Text File with Name</a>
JavaScript bisa sangat berguna saat Anda ingin menjadikan semuanya dinamis. Ini sebuah contoh
1const link = document.querySelector('a.dynamic'); 23let name = 'Monty'; 4data:[<mediatype>][;base64],<data> 0data:[<mediatype>][;base64],<data> 1data:[<mediatype>][;base64],<data> 2data:[<mediatype>][;base64],<data> 3data:[<mediatype>][;base64],<data> 4data:[<mediatype>][;base64],<data> 5data:[<mediatype>][;base64],<data> 6data:[<mediatype>][;base64],<data> 7________0______8data:[<mediatype>][;base64],<data> 9
Kita mulai dengan memilih tautan kita menggunakan metode data:[<mediatype>][;base64],<data> _24 dan kemudian membuat banyak variabel untuk menyimpan nama file dan isinya. Menggunakan template literal memungkinkan kita bekerja dengan string multi-baris dengan mudah
Kami membuat URL data kami dengan menggabungkan metadata dengan konten aktual yang disandikan menggunakan fungsi data:[<mediatype>][;base64],<data> 25. Demo CodePen berikut menunjukkan metode menyimpan file teks ini menggunakan JavaScript
Menggunakan Gumpalan untuk Membuat dan Menyimpan File
Gumpalan adalah objek mirip file dalam JavaScript yang berisi data mentah. Data mentah ini dapat dibaca sebagai teks atau sebagai data biner. Dalam tutorial ini, kita akan menggunakan blob untuk membuat dan menyimpan file dalam JavaScript
Kita dapat membuat gumpalan kita sendiri menggunakan konstruktor data:[<mediatype>][;base64],<data> 26, yang menerima larik objek tertentu untuk dimasukkan ke dalam gumpalan. Anda dapat meneruskan tipe data MIME sebagai pasangan kunci-nilai dalam objek yang merupakan parameter kedua dari konstruktor data:[<mediatype>][;base64],<data> 26. Ini adalah string kosong secara default
Kita dapat memodifikasi contoh terakhir di bagian sebelumnya untuk menggunakan blob dengan kode JavaScript berikut
11123let name = 'Monty'; 4data:[<mediatype>][;base64],<data> 0____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________ E jelas_
Kami membuat data:[<mediatype>][;base64],<data> _28 kami dengan memanggil konstruktor data:[<mediatype>][;base64],<data> 26 dan meneruskan variabel data:[<mediatype>][;base64],<data> 30 kami ke sana sebagai elemen array. Setelah itu, kita cukup menetapkan nilai atribut ________0______31 dan data:[<mediatype>][;base64],<data> 23. URL dalam hal ini dibuat dengan memanggil fungsi data:[<mediatype>][;base64],<data> 33, yang mengembalikan string yang berisi URL untuk objek yang kita berikan padanya
Mari selangkah lebih maju dan buat blob tempat teks diperoleh secara dinamis dari elemen data:[<mediatype>][;base64],<data> 34 di halaman web. Anda akan dapat menulis apa pun yang Anda suka di data:[<mediatype>][;base64],<data> 34 dan kemudian klik tombol Simpan File untuk menyimpannya sebagai file
1102let name = 'Monty'; 3415data:[<mediatype>][;base64],<data> 117data:[<mediatype>][;base64],<data> 319data:[<mediatype>][;base64],<data> 5const link = document.querySelector('a.dynamic'); 1data:[<mediatype>][;base64],<data> 6const link = document.querySelector('a.dynamic'); 3data:[<mediatype>][;base64],<data> 8<a download="monty.txt" href="data:text/plain;charset=utf-8,My name is Monty.">Download Text File with Name</a> 5const link = document.querySelector('a.dynamic'); 6<a download="monty.txt" href="data:text/plain;charset=utf-8,My name is Monty.">Download Text File with Name</a> 7const link = document.querySelector('a.dynamic'); 8const link = document.querySelector('a.dynamic'); 92021172324252627
Kami mulai dengan mendapatkan referensi ke tombol kami dan kemudian mendengarkan acara kliknya. Setelah tombol diklik, kami mendapatkan nilai elemen data:[<mediatype>][;base64],<data> 34 kami dan mengubahnya menjadi gumpalan. Setelah itu, kami membuat URL yang mereferensikan gumpalan kami dan menetapkannya ke atribut data:[<mediatype>][;base64],<data> 31 dari tag jangkar yang kami buat
Anda dapat mencobanya di demo CodePen berikut. Sebagai latihan, coba ubah kode sehingga menyimpan file dengan nama yang dimasukkan oleh pengguna alih-alih sesuatu yang statis
Cara Menyimpan File di Folder Tertentu Menggunakan JavaScript
Mari kita mulai dengan menjawab pertanyaan ini terlebih dahulu. Singkatnya, Anda tidak dapat secara sembarangan memilih direktori tempat file disimpan dalam JavaScript. Hanya pengguna yang memiliki kendali atas lokasi penyimpanan file
Alasan pengembang web tidak diizinkan untuk memiliki kendali penuh atas lokasi penyimpanan file oleh browser berkaitan dengan keamanan. Internet akan jauh lebih tidak aman jika setiap situs web memiliki akses ke sistem file di perangkat Anda. Mereka dapat dengan mudah menyuntikkan kode berbahaya ke dalam sistem Anda atau melihat informasi pribadi
Sebelumnya, tidak mungkin untuk menyimpan file di mana pun kecuali folder unduhan default, yang ditentukan oleh pengaturan browser dan bukan situs web individu. Namun, memungkinkan pengembang untuk menyarankan di mana file dapat disimpan setelah mereka diberi akses oleh pengguna. Perlu diingat bahwa dukungan browser yang lebih luas saat ini kurang untuk API, dan browser yang mendukungnya hanya melakukannya sebagian
Mari ubah contoh terakhir kita dari bagian sebelumnya untuk membuat dan menyimpan file dalam JavaScript dengan File System Access API
1102let name = 'Monty'; 3434data:[<mediatype>][;base64],<data> 117data:[<mediatype>][;base64],<data> 3const link = document.querySelector('a.dynamic'); 1data:[<mediatype>][;base64],<data> 5const link = document.querySelector('a.dynamic'); 3data:[<mediatype>][;base64],<data> 617data:[<mediatype>][;base64],<data> 8let name = 'Monty'; 4<a download="monty.txt" href="data:text/plain;charset=utf-8,My name is Monty.">Download Text File with Name</a> 5let name = 'Monty'; 6<a download="monty.txt" href="data:text/plain;charset=utf-8,My name is Monty.">Download Text File with Name</a> 7let name = 'Monty'; 8const link = document.querySelector('a.dynamic'); 940214223442546274849data:[<mediatype>][;base64],<data> 00data:[<mediatype>][;base64],<data> 01data:[<mediatype>][;base64],<data> 02data:[<mediatype>][;base64],<data> 03data:[<mediatype>][;base64],<data> 04data:[<mediatype>][;base64],<data> 05data:[<mediatype>][;base64],<data> 06data:[<mediatype>][;base64],<data> 07data:[<mediatype>][;base64],<data> 08data:[<mediatype>][;base64],<data> 09data:[<mediatype>][;base64],<data> 10data:[<mediatype>][;base64],<data> 11data:[<mediatype>][;base64],<data> 12data:[<mediatype>][;base64],<data> 13data:[<mediatype>][;base64],<data> 14data:[<mediatype>][;base64],<data> 15data:[<mediatype>][;base64],<data> 16data:[<mediatype>][;base64],<data> 1726
Seperti biasa, kita mulai dengan membuat gumpalan data:[<mediatype>][;base64],<data> 30 di dalam elemen data:[<mediatype>][;base64],<data> 34. Kami membuat objek yang berisi opsi berbeda untuk pemilih file kami yang muncul saat kami memanggil metode data:[<mediatype>][;base64],<data> 40. Kami dapat menyarankan nama untuk menyimpan file di sini dan juga meneruskan array jenis file yang diizinkan untuk disimpan. Metode ini mengembalikan data:[<mediatype>][;base64],<data> _41 di mana kita dapat memanggil metode data:[<mediatype>][;base64],<data> 42
Metode data:[<mediatype>][;base64],<data> 42 membuat aliran yang dapat ditulisi, dan kami menulis blob yang kami buat sebelumnya ke aliran ini. Akhirnya, kami menutup aliran yang dapat ditulisi kami. Pada titik ini, konten dari aliran disimpan ke file
Coba tulis sesuatu di data:[<mediatype>][;base64],<data> 34 CodePen berikut, lalu klik tombol Save File. Demo tidak akan berfungsi di Firefox, jadi Anda harus mencoba menggunakan Chrome atau Edge
Pikiran Akhir
Dalam tutorial ini, kita mempelajari tiga teknik berbeda untuk membuat dan menyimpan file dalam JavaScript. Dua teknik pertama mengharuskan kita membuat tag jangkar dan menetapkan nilai ke atribut data:[<mediatype>][;base64],<data> 31 dan data:[<mediatype>][;base64],<data> 23 mereka. Teknik terakhir melibatkan penggunaan File System Access API dan memberi kami kontrol yang lebih baik atas berbagai aspek proses seperti mengubah lokasi pengunduhan default dengan izin pengguna. Namun, saat ini tidak memiliki dukungan browser yang signifikan untuk digunakan dalam proyek nyata