can web offline app access local file?

Question

Hi guys: I am woking on creating a offline-web application. I hope it can be run in UIWebView(iOS) or WebView(Android). I don't know if it does work. The html and javascript files work fine now, but my apps need to process some binary files which is defined by myself, and these files are dynamic created so they can not be put in off-line cache manifest. If the web pages are loaded in web browser from web server, I can read the binary files through XMLHttpRequest. But if the browser open the pages as local files, the binary files can not be read through http protocol and even can't be access by the javascript, I guess for security reasons. I am stucked here, could you guys give me some tips about how can javascript in off-line web app create/read/write local files? I tried to use <img src="my_data_file"/>, and hope I can get the raw data from the element, but no way. If the javascript can not do this, is there any workaround to use existed html tags to read the raw data?

Answer 1

You may want to take a look at this project http://www.phonegap.com/ as a possible longer term solution for the problem of accessing device files. What this system does is provide you with a javascript API for some of the devices actual hardware features, possibly including the file IO you would need to manipulate large files. Its been an open source project that has been around for quite some time, but has some tradeoffs, like you have to actually deploy a separate binary to each target OS. :-/

Answer 2

I use the Web SQL db (which can have a max storage of 50MB on iOS; variable size in Android) for local image storage. I serialize the images as base64 (on the server side, but could be done client-side as well) and store them in the sqlite db as text. It's not unlimited storage, but it beats 5MB.

Answer 3

There is local storage, and it works like a database. Here's a nice tutorial.

http://html5tutorial.net/tutorials/working-with-html5-localstorage.html

You'll have to load the images dynamically though using the Image() object. The browser should cache images in offline mode though...

This question looks pretty similar to what you're looking for:

Can you use HTML5 local storage to store a file? If not, how?