Bagaimana cara membaca dan menulis ke dalam file menggunakan JavaScript?

Adakah yang bisa memberikan kode sampel untuk membaca dan menulis file menggunakan JavaScript?

Untuk kelengkapan, OP tidak menyatakan dia ingin melakukan ini di browser (jika dia, seperti yang telah disebutkan, umumnya tidak mungkin)

Namun javascript per se memang memungkinkan ini; itu dapat dilakukan dengan javascript sisi server.

Lihat dokumentasi ini di kelas File Javascript

Sunting : Tautan itu ke dokumen Sun yang sekarang telah dipindahkan oleh Oracle.

Untuk mengikuti perkembangannya, inilah dokumentasi node.js untuk kelas FileSystem: http://nodejs.org/docs/latest/api/fs.html

Sunting (2) : Anda dapat membaca file sisi klien sekarang dengan HTML5: http://www.html5rocks.com/en/tutorials/file/dndfiles/

Tidak. Javascript sisi-browser tidak memiliki izin untuk menulis ke mesin klien tanpa banyak opsi keamanan yang harus dinonaktifkan

Masa depan ada di sini! Proposal mendekati penyelesaian, tidak ada lagi ActiveX atau flash atau java. Sekarang kita bisa menggunakan:

• API Sistem File

• Seret Asli & Jatuhkan Akses File

Anda bisa menggunakan Drag / Drop untuk memasukkan file ke browser, atau kontrol unggah yang sederhana. Setelah pengguna memilih file, Anda dapat membacanya dengan Javascript: http://www.html5rocks.com/en/tutorials/file/dndfiles/

inilah proposal mozilla

http://www-archive.mozilla.org/js/js-file-object.html

ini diimplementasikan dengan sakelar kompilasi dalam spidermonkey, dan juga dalam skrip extends adobe. Selain itu (saya pikir) Anda mendapatkan objek File di ekstensi firefox.

badak memiliki fungsi readFile (agak sederhana) https://developer.mozilla.org/en/Rhino_Shell

untuk operasi file yang lebih kompleks di badak, Anda dapat menggunakan metode java.io.File.

Anda tidak akan mendapatkan semua ini di browser. Untuk fungsionalitas serupa di browser Anda dapat menggunakan fungsi database SQL dari HTML5, kegigihan sisi klien, cookie, dan objek penyimpanan flash.

Fungsi Javascript ini menyajikan kotak dialog "Simpan Sebagai" yang lengkap untuk pengguna yang menjalankan ini melalui browser. Pengguna menekan OK dan file disimpan.

Sunting: Kode berikut hanya berfungsi dengan Browser IE sejak Firefox dan Chrome menganggap kode ini sebagai masalah keamanan dan telah memblokirnya agar tidak berfungsi.

// content is the data you'll write to file<br/>
// filename is the filename<br/>
// what I did is use iFrame as a buffer, fill it up with text
function save_content_to_file(content, filename)
{
    var dlg = false;
    with(document){
     ir=createElement('iframe');
     ir.id='ifr';
     ir.location='about.blank';
     ir.style.display='none';
     body.appendChild(ir);
      with(getElementById('ifr').contentWindow.document){
           open("text/plain", "replace");
           charset = "utf-8";
           write(content);
           close();
           document.charset = "utf-8";
           dlg = execCommand('SaveAs', false, filename+'.txt');
       }
       body.removeChild(ir);
     }
    return dlg;
}

Meminta fungsi:

save_content_to_file("Hello", "C:\\test");

Jika Anda menggunakan JScript (Microsoft's Javascript) untuk melakukan skrip lokal menggunakan WSH (BUKAN di browser!) Anda dapat menggunakan Scripting.FileSystemObjectuntuk mengakses sistem file.

Saya pikir Anda dapat mengakses objek yang sama di IE jika Anda mematikan banyak pengaturan keamanan, tetapi itu akan menjadi ide yang sangat, sangat buruk.

MSDN di sini

Saat ini, file dapat ditulis dan dibaca dari konteks tab / jendela browser dengan File , FileWriter , dan FileSystem API, meskipun ada peringatan untuk penggunaannya (lihat bagian dari jawaban ini).

Tetapi untuk menjawab pertanyaan Anda:

Menggunakan BakedGoods *

Menulis file:

bakedGoods.set({
    data: [{key: "testFile", value: "Hello world!", dataFormat: "text/plain"}],
    storageTypes: ["fileSystem"],
    options: {fileSystem:{storageType: Window.PERSISTENT}},
    complete: function(byStorageTypeStoredItemRangeDataObj, byStorageTypeErrorObj){}
});

Baca file:

bakedGoods.get({
        data: ["testFile"],
        storageTypes: ["fileSystem"],
        options: {fileSystem:{storageType: Window.PERSISTENT}},
        complete: function(resultDataObj, byStorageTypeErrorObj){}
});

Menggunakan File mentah, FileWriter, dan FileSystem API

Menulis file:

function onQuotaRequestSuccess(grantedQuota)
{

    function saveFile(directoryEntry)
    {

        function createFileWriter(fileEntry)
        {

            function write(fileWriter)
            {
                var dataBlob = new Blob(["Hello world!"], {type: "text/plain"});
                fileWriter.write(dataBlob);              
            }

            fileEntry.createWriter(write);
        }

        directoryEntry.getFile(
            "testFile", 
            {create: true, exclusive: true},
            createFileWriter
        );
    }

    requestFileSystem(Window.PERSISTENT, grantedQuota, saveFile);
}

var desiredQuota = 1024 * 1024 * 1024;
var quotaManagementObj = navigator.webkitPersistentStorage;
quotaManagementObj.requestQuota(desiredQuota, onQuotaRequestSuccess);

Baca file:

function onQuotaRequestSuccess(grantedQuota)
{

    function getfile(directoryEntry)
    {

        function readFile(fileEntry)
        {

            function read(file)
            {
                var fileReader = new FileReader();

                fileReader.onload = function(){var fileData = fileReader.result};
                fileReader.readAsText(file);             
            }

            fileEntry.file(read);
        }

        directoryEntry.getFile(
            "testFile", 
            {create: false},
            readFile
        );
    }

    requestFileSystem(Window.PERSISTENT, grantedQuota, getFile);
}

var desiredQuota = 1024 * 1024 * 1024;
var quotaManagementObj = navigator.webkitPersistentStorage;
quotaManagementObj.requestQuota(desiredQuota, onQuotaRequestSuccess);

Apa yang Anda minta, kan? Mungkin tidak. Dua API terakhir:

• Saat ini hanya diterapkan di browser berbasis Chromium (Chrome & Opera)
• Telah dikeluarkan dari jalur standar W3C, dan sampai sekarang adalah API eksklusif
• Dapat dihapus dari browser pelaksana di masa mendatang
• Batasi pembuatan file ke kotak pasir (lokasi di luar file tidak dapat menghasilkan efek) pada disk

Selain itu, spesifikasi FileSystem tidak mendefinisikan pedoman tentang bagaimana struktur direktori muncul di disk. Dalam browser berbasis Chromium misalnya, kotak pasir memiliki sistem file virtual (struktur direktori yang tidak perlu ada pada disk dalam bentuk yang sama ketika diakses dari dalam browser), di mana direktori dan file dibuat dengan API ditempatkan.

Jadi, meskipun Anda mungkin dapat menulis file ke sistem dengan API, mencari file tanpa API (well, tanpa FileSystem API) bisa menjadi urusan yang tidak sepele.

Jika Anda dapat mengatasi masalah / batasan ini, API ini adalah satu-satunya cara asli untuk melakukan apa yang Anda minta.

Jika Anda terbuka untuk solusi non-asli, Silverlight juga memungkinkan untuk file i / o dari kontes tab / window melalui IsolatedStorage . Namun, kode terkelola diperlukan untuk memanfaatkan fasilitas ini; solusi yang mengharuskan penulisan kode semacam itu berada di luar cakupan pertanyaan ini.

Tentu saja, solusi yang menggunakan kode terkelola pelengkap, meninggalkan satu dengan hanya Javascript untuk menulis, baik dalam lingkup pertanyaan ini;):

//Write file to first of either FileSystem or IsolatedStorage
bakedGoods.set({
    data: [{key: "testFile", value: "Hello world!", dataFormat: "text/plain"}],
    storageTypes: ["fileSystem", "silverlight"],
    options: {fileSystem:{storageType: Window.PERSISTENT}},
    complete: function(byStorageTypeStoredItemRangeDataObj, byStorageTypeErrorObj){}
});

* BakedGoods adalah perpustakaan Javascript yang membuat antarmuka seragam yang dapat digunakan untuk melakukan operasi penyimpanan umum di semua fasilitas asli, dan beberapa fasilitas penyimpanan non-asli. Itu dikelola oleh orang ini di sini :)

Untuk Firefox:

var file = Components.classes["@mozilla.org/file/local;1"].
       createInstance(Components.interfaces.nsILocalFile);
file.initWithPath("/home");

Lihat https://developer.mozilla.org/en-US/docs/Code_snippets/File_I_O

Untuk yang lain, lihat aplikasi TiddlyWiki untuk melihat bagaimana melakukannya.

Dalam konteks browser, Javascript dapat MEMBACA file yang ditentukan pengguna. Lihat blog Eric Bidelman untuk detail tentang membaca file menggunakan File API. Namun, Javascript berbasis browser tidak dapat MENULIS sistem file komputer lokal tanpa menonaktifkan beberapa pengaturan keamanan karena dianggap sebagai ancaman keamanan bagi situs web mana pun untuk mengubah sistem file lokal Anda secara sewenang-wenang.

Mengatakan itu, ada beberapa cara untuk mengatasinya tergantung apa yang Anda coba lakukan:

1. Jika itu adalah situs Anda sendiri, Anda dapat menyematkan Java Applet di halaman web. Namun, pengunjung harus menginstal Java pada mesin lokal dan akan diberitahu tentang risiko keamanan. Pengunjung harus membiarkan applet dimuat. Java Applet seperti perangkat lunak yang dapat dieksekusi yang memiliki akses lengkap ke komputer lokal.

2. Chrome mendukung sistem file yang merupakan bagian sandbox dari sistem file lokal. Lihat halaman ini untuk detailnya. Ini memungkinkan Anda untuk menyimpan sementara hal-hal secara lokal. Namun, ini tidak didukung oleh browser lain.

3. Jika Anda tidak terbatas pada browser, Node.js memiliki antarmuka sistem file yang lengkap. Lihat di sini untuk dokumentasi sistem filenya . Perhatikan bahwa Node.js dapat berjalan tidak hanya di server, tetapi juga komputer klien termasuk windows. Pelari uji javascript Karma didasarkan pada Node.js. Jika Anda hanya ingin memprogram dalam javascript di komputer lokal, ini merupakan opsi.

Untuk membuat file coba

function makefile(){
  var fso;
  var thefile;

    fso = new ActiveXObject("Scripting.FileSystemObject");
    thefile=fso.CreateTextFile("C:\\tmp\\MyFile.txt",true);

    thefile.close()
    }

Buat direktori Anda di drive C karena windows memiliki keamanan terhadap penulisan dari web misalnya membuat folder bernama "tmp" di drive C.

Anda harus beralih ke Flash, Java atau Silverlight. Dalam kasus Silverlight, Anda akan melihat Penyimpanan Terpencil . Itu akan membuat Anda menulis ke file di taman bermain Anda sendiri pada disk pengguna. Ini tidak akan membiarkan Anda menulis di luar taman bermain Anda.

Anda tidak dapat melakukan ini dengan cara lintas browser apa pun. IE memang memiliki metode untuk mengaktifkan aplikasi "tepercaya" untuk menggunakan objek ActiveX untuk membaca / menulis file, tetapi hanya itu sayangnya.

Jika Anda ingin menyimpan informasi pengguna, kemungkinan besar Anda perlu menggunakan cookie.

Dari tes ReactJS, kode berikut berhasil menulis file:

import writeJsonFile from 'write-json-file';

const ans = 42;
writeJsonFile('answer.txt', ans);

const json = {"answer": ans};
writeJsonFile('answer_json.txt', json);

File tersebut ditulis ke direktori yang berisi tes, jadi menulis ke file JSON yang sebenarnya '* .json' membuat perulangan!

Anda tidak dapat melakukan file i / o di sisi klien menggunakan javascript karena itu akan menjadi risiko keamanan. Anda harus membuatnya untuk mengunduh dan menjalankan exe, atau jika file ada di server Anda, gunakan AJAX dan bahasa sisi-server seperti PHP untuk melakukan i / o di sisi server

Ada dua cara untuk membaca dan menulis file menggunakan JavaScript

1. Menggunakan ekstensi JavaScript

2. Menggunakan halaman web dan objek Active X

Berikut ini adalah solusi tulis untuk chrome v52 + (pengguna masih harus memilih tujuan do ...)
sumber: StreamSaver.js

<!-- load StreamSaver.js before streams polyfill to detect support -->
<script src="StreamSaver.js"></script>
<script src="https://wzrd.in/standalone/web-streams-polyfill@latest"></script>

const writeStream = streamSaver.createWriteStream('filename.txt')
const encoder = new TextEncoder
let data = 'a'.repeat(1024)
let uint8array = encoder.encode(data + "\n\n")

writeStream.write(uint8array) // must be uInt8array
writeStream.close()

Paling cocok untuk menulis data besar yang dihasilkan di sisi klien.
Kalau tidak saya sarankan menggunakan FileSaver.js untuk menyimpan Blob / Files