How to Save a file at client side using JavaScript?

Question

I want to save a JSON object to a file at client to persist it for future usage, I have tried following line

window.open("data:text/json;charset=utf-8," + escape(JSON.stringify(obj)));

and it works!! Problem it asks user the location and name of the file for saving. What I want is I want the user completely unaware of the fact that something is being saved for future use or atleast keep it to minimum possible user clicks.

How can I give the file name and location statically in window.open() ?

Thanks in advance,

EDIT

Just to make it clear that " I don't store arbitrary or unwanted data. All the users are registered users of the system." In normal conditions I don't store anything locally. However I want to store some JSON objects if the network was not available at the time of form submission.

One obvious solution will be to use cookies. Since Cookies can be accidentally deleted due to user's browser settings. I need a way to persist the data till the network becomes available. It will be greater to have cross browser support.

Answer 1

如果要保留数据，然后使用存储API ，则无法使用用户的文件系统来玩游戏。

Answer 2

你不能这样做，这是客户端的安全问题。

Answer 3

FSO.js wraps the temporary/persistent FileSystem API and will allow you to easily read/write files... only supported by Chrome right now, but the spec is coming along fast. :)

Answer 4

I want the values for cross-browser support, even if the user changes the browser he/she should be able to proceed from where he left. I am storing information in JSON objects.

I think users don't expect a web application to share information with other browsers on the same machine this way. Also, I doubt many users change their browser too frequently anyway to warrant a privacy-invasive feature like this. You should either consider storing the information on your server (by forcing a user to register or using common accounts like OpenID, Google, Facebook etc.) or on the client side by setting a cookie or using the mentioned storage technologies.

If you really want to restrict stored information to browsers on the same machine, and don't want to permit access by the same user on different machines, you could take a look into LSO ('Flash cookies') which seem to be saved browser independent. You don't need any user confirmation for storing LSOs.

Update: Flash isn't supported by browsers as it used to be and not widely used nowadays, so LSOs aren't a good option any more.

Answer 5

FileSystem APIs is part of HTML5 spec and it is possible to access file system in a sandbox for a certain website in modern browsers, here is a good tutorial: http://www.html5rocks.com/en/tutorials/file/filesystem/

However I would go with LocalStorage API for that matter which has better browser support: http://www.w3schools.com/html5/html5_webstorage.asp

Answer 6

As has already been mentioned in the comments, this is not possible without express user consent for obvious security reasons. however, as also mentioned in comments, you shoudl/could store the information in a cookie which will then be retrievable when the user returns.

something like this would do it

document.cookie="cookie_name="+required_value+"; expires=Monday, 04-Dec-2011 05:00:00 GMT";

obviously the expires time will be as long as you need the information to persist.

hope that helps