How to read and write into file using JavaScript?

I found this resource regarding client-side file storage. html5rocks.com/en/tutorials/offline/storage From what I've gathered, HTML5 actually allows Websights to store information on the user's local hard drive, but in a more database-like manor. The browser manages the file storage and imposes certain limits to prevent the World Wide Web from loading peoples hard drives down to the brim. They're not completely fool proof yet, but they're being tweaked, at least according to this article. Have a read for details.

Commented Dec 28, 2016 at 3:02

Use Ajax and with PHP handle reading and writing files. If you want to handle writing to files client side, you should forget it. It would require many security options to be disabled on the server and you would be left with an extremely insecure site. If you don't want to use PHP, maybe what you want to achieve can be done by using JavaScript Cookies to store data on the clients computer.

Commented Jan 14, 2017 at 20:24

17 Answers 17

For completeness, the OP does not state he is looking to do this in a browser (if he is, as has been stated, it is generally not possible)

However javascript per se does allow this; it can be done with server side javascript.

Edit: That link was to the Sun docs that now have been moved by Oracle.

To keep up with the times here's the node.js documentation for the FileSystem class: http://nodejs.org/docs/latest/api/fs.html

Edit(2): You can read files client side now with HTML5: http://www.html5rocks.com/en/tutorials/file/dndfiles/

answered Feb 25, 2009 at 17:26 DanSingerman DanSingerman 36.4k 13 13 gold badges 82 82 silver badges 95 95 bronze badges Is it possible to write to local files using HTML5 as well? Commented Aug 3, 2012 at 17:43

Also, depending on your situation you could make an ajax call to a php script and dump the data that way. This was useful in my situation where I wanted to store some data generated on the javascript side, but didn't matter how it got there.

Commented Jan 15, 2013 at 2:34

@DustinGraham, Actually now with Chrome APIs we can actually write files to client side via JavaScript right?

Commented Jun 26, 2015 at 23:35

No. Browser-side javascript doesn't have permission to write to the client machine without a lot of security options having to be disabled

answered Feb 25, 2009 at 9:08 137k 36 36 gold badges 150 150 silver badges 157 157 bronze badges

@marcgg: That makes this answer incomplete, not incorrect. And, let's face it, it's highly likely that this answer does cover the OP's use case.

Commented Jun 8, 2011 at 12:16

If the OP was planning on using javascript outside of the browser, that's uncommon enough that they probably would have mentioned it. It's not unreasonable (and definitely not incorrect) to assume a browser. +1 (to make up for marcgg's -1).

Commented Jun 15, 2011 at 12:26

@LightnessRacesinOrbit The downvote button doesn't mean that the answer is thought to be incorrect. Its tooltip text is This answer is not useful .

Commented Nov 28, 2015 at 6:46

@Mike — It wasn't when this answer was written, and it is still reasonable to assume browser-side JS by default.

Commented Jun 20, 2016 at 14:21

The future is here! The proposals are closer to completion, no more ActiveX or flash or java. Now we can use:

You could use the Drag/Drop to get the file into the browser, or a simple upload control. Once the user has selected a file, you can read it w/ Javascript: http://www.html5rocks.com/en/tutorials/file/dndfiles/

answered Aug 10, 2011 at 12:55 Thomas Shields Thomas Shields 8,934 5 5 gold badges 43 43 silver badges 78 78 bronze badges Links are broken now. Commented Jun 28, 2016 at 7:38 Links are broken again, they're both the same link, but with different meanings.. Broken. Commented Dec 12, 2018 at 4:43 @insidesin fixed Commented Jan 17, 2019 at 0:36

here's the mozilla proposal

this is implemented with a compilation switch in spidermonkey, and also in adobe's extendscript. Additionally (I think) you get the File object in firefox extensions.

rhino has a (rather rudementary) readFile function https://developer.mozilla.org/en/Rhino_Shell

for more complex file operations in rhino, you can use java.io.File methods.

you won't get any of this stuff in the browser though. For similar functionality in a browser you can use the SQL database functions from HTML5, clientside persistence, cookies, and flash storage objects.

answered Feb 25, 2009 at 9:59 15.6k 3 3 gold badges 60 60 silver badges 76 76 bronze badges

This Javascript function presents a complete "Save As" Dialog box to the user who runs this through the browser. The user presses OK and the file is saved.

Edit: The following code only works with IE Browser since Firefox and Chrome have considered this code a security problem and has blocked it from working.

// content is the data you'll write to file 
// filename is the filename 
// 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; >

Invoke the function:

save_content_to_file("Hello", "C:\\test");
152k 96 96 gold badges 420 420 silver badges 335 335 bronze badges answered Oct 24, 2011 at 8:34 310 1 1 gold badge 6 6 silver badges 16 16 bronze badges ir=createElement('iframe'); -- iframe is iFrame ID. Commented Oct 24, 2011 at 8:35 Also, will it work on all operating systems (as long as a valid file location is chosen?) Commented Aug 3, 2012 at 17:51

This is a good solution but, does it work with only IE? I tried IE and FF and with FF it does not work.

Commented Oct 26, 2012 at 14:03

Currently, files can be written and read from the context of a browser tab/window with the File, FileWriter, and FileSystem APIs, though there are caveats to their use (see tail of this answer).

But to answer your question:

Using BakedGoods*

bakedGoods.set(< data: [], storageTypes: ["fileSystem"], options: >, complete: function(byStorageTypeStoredItemRangeDataObj, byStorageTypeErrorObj)<> >); 
bakedGoods.get(< data: ["testFile"], storageTypes: ["fileSystem"], options: >, complete: function(resultDataObj, byStorageTypeErrorObj)<> >);

Using the raw File, FileWriter, and FileSystem APIs

function onQuotaRequestSuccess(grantedQuota) < function saveFile(directoryEntry) < function createFileWriter(fileEntry) < function write(fileWriter) < var dataBlob = new Blob(["Hello world!"], ); fileWriter.write(dataBlob); > fileEntry.createWriter(write); > directoryEntry.getFile( "testFile", , createFileWriter ); > requestFileSystem(Window.PERSISTENT, grantedQuota, saveFile); > var desiredQuota = 1024 * 1024 * 1024; var quotaManagementObj = navigator.webkitPersistentStorage; quotaManagementObj.requestQuota(desiredQuota, onQuotaRequestSuccess); 
function onQuotaRequestSuccess(grantedQuota) < function getfile(directoryEntry) < function readFile(fileEntry) < function read(file) < var fileReader = new FileReader(); fileReader.onload = function(); fileReader.readAsText(file); > fileEntry.file(read); > directoryEntry.getFile( "testFile", , readFile ); > requestFileSystem(Window.PERSISTENT, grantedQuota, getFile); > var desiredQuota = 1024 * 1024 * 1024; var quotaManagementObj = navigator.webkitPersistentStorage; quotaManagementObj.requestQuota(desiredQuota, onQuotaRequestSuccess);

Just what you asked for right? Maybe, maybe not. The latter two of the APIs:

Additionally, the FileSystem spec defines no guidelines on how directory structures are to appear on disk. In Chromium-based browsers for example, the sandbox has a virtual file system (a directory structure which does not necessarily exist on disk in the same form that it does when accessed from within the browser), within which the directories and files created with the APIs are placed.

So though you may be able to write files to a system with the APIs, locating the files without the APIs (well, without the FileSystem API) could be a non-trivial affair.

If you can deal with these issues/limitations, these APIs are pretty much the only native way to do what you've asked.

If you're open to non-native solutions, Silverlight also allows for file i/o from a tab/window contest through IsolatedStorage. However, managed code is required to utilize this facility; a solution which requires writing such code is beyond the scope of this question.

Of course, a solution which makes use of complementary managed code, leaving one with only Javascript to write, is well within the scope of this question ;) :

//Write file to first of either FileSystem or IsolatedStorage bakedGoods.set(< data: [], storageTypes: ["fileSystem", "silverlight"], options: >, complete: function(byStorageTypeStoredItemRangeDataObj, byStorageTypeErrorObj)<> >);

* BakedGoods is a Javascript library that establishes a uniform interface that can be used to conduct common storage operations in all native, and some non-native storage facilities. It is maintained by this guy right here : ) .