1

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?

icespace
  • 481
  • 9
  • 20
  • I still don't get the file workflow. First you say they're dynamically created, then you want to load them locally. What is it now? Loading a local file on your HDD is not the same as using a website in offline mode btw. – DanMan Apr 17 '11 at 09:33

3 Answers3

2

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?

Community
  • 1
  • 1
beatgammit
  • 19,817
  • 19
  • 86
  • 129
  • Thanks for answering. But my files will be bigger than 5M, and I thought they can't be stored in local storage as a key-value pare. The FileSystem API is not supported in safari, so I guess UIWebView may not support the FileSystem API. – icespace Apr 17 '11 at 08:58
  • Those are pretty big files. The cache manifest cannot be accessed directly, so I think you're out of luck, unless you feel like encoding your data into base64 and reencoding it when you get it back out, but you'll still hit the limit. There's no other way that I know of to access local storage. – beatgammit Apr 17 '11 at 09:03
  • @tjamson: Maybe you are right, I have been searching for a long time, nothing found. I guess I need some native code to help the off-line web app. But iOS and android versions are needed. – icespace Apr 17 '11 at 09:38
0

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.

Liza Daly
  • 2,933
  • 23
  • 31
0

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. :-/

Norman H
  • 2,248
  • 24
  • 27