0

I'm planning to implement "Recenty Opened Files" functionality in my webapp and I'm trying to decide which HTML5 technologies to use. The most important thing here is a fact, that I can't just save a filepath to the file and then reopen it. Due to security reasons, reading a file must be initiated by user action (choosing a file from input or dragging and dropping it). So the only option is to save the whole file in cache. Here are my options:

A. LocalStorage

  1. Store the JSON object like this:

    {
    "recent": [
        {}, {},..., {}
    ]
}

    where each {} is a JSON file descriptor looking like this:

    {
    "filename": "blah",
    "type" : "txt",
    "chunks": ['"3bce4931-6c75-41ab-afe0-2ec108a30860"',...]
}

    where each chunk is a key in localstorage to lzw-encoded data chunk. Each chunk is data from blobfile, obtained while reading a file.

    I know, that localstorage can store only string, not JSON, but it's easy to serialise. The problem with this apprach is limited size of local storage and synchronous API, which can slow down whole application while reading a chunk of data from the file.

B. IndexedDB

I just started to read about this HTML5 feature but apparently it has asynchroinous API and is able to store whole fileBlob object. I don't know size limitations though. Unfortunately browser support is very limited and API seems to be horrible.

Question is:

I can't find any implementation of Rcenty Opened Files using either of technologies. Do you have? Any suggestions, known gotchas?

mnowotka
  • 16,430
  • 18
  • 88
  • 134
  • Can you provide some more information. You are talking about recent opened files, is this something that needs to be persistent? I mean when you close the browser and reopen, do you still want to have the same results? If no, just keep it in memory then. If yes, I would advice you to take a look at indexeddb. The localstorage can only store 5mb per domain, nothing more. Indexeddb has in principal unlimited storage (Depending on the harddisk space.), but most browsers have set limits. Also chrome doesn't support blobs in the indexeddb for now. Maybe take a look at the File & directory API. – Kristof Degrave Mar 07 '13 at 14:01
  • It should behave exactly like desktop app. If you close Word or Excel and the reopen it it will still keep the list of recently opened files - basically that the purpose of this functionality. Can you point to to any example of storing whole fileBlob into indexeddb? – mnowotka Mar 07 '13 at 15:05
  • 1
    you can find some more information here http://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/ – Kristof Degrave Mar 07 '13 at 17:55

1 Answers1

0

I think your JSON/LocalStorage approach is a good solution. You can easily work on the datas using it as a temporary JS object and overriding the localstorage entry at each modification (i use it a lot for my mobile apps).

You can also have a look at JS MVC frameworks to optimize your work http://backbonejs.org/docs/backbone-localstorage.html

Tip : Don't use webSQL (lite) DB as the W3C isn't supporting it anymore.

Alex Pereira
  • 916
  • 1
  • 9
  • 17