1

I just read the de facto standard for HTML5 offline/localStorage.

It has me curious: if I build my web app to work regardless of whether or not there's an internet connection, and I use HTML5 localStorage to do this, then how are web app URLs affected when in "offline mode"?

For instance, normally my web app's home page might be http://myapp.example.com. How would this change in offline mode; what would the URL be?

I'm hoping that the browser would allow my users to still go to http://myapp.example.com, but then detect no network connection, and attempt to load the site from localStorage.

But it's also possible that, once they load the site from cache, they automatically change the URL to something like file:///path/to/localStorage/homepage.html.

It's also entirely possible I misunderstood that entire article and this is not something that even localStorage can do for me. Any ideas?

herpylderp
  • 2,017
  • 3
  • 21
  • 27

1 Answers1

1

localStorage is just a storage location that your web app can access, you still need internet access for everything else unless it has been cached already by the browser.

here's some info I dug up about localStorage:

  • localStorage doesn't change the url of your resources to local files, those are still stored in your server or your browser cache.
  • you have to access localStorage manually to access the stuff you stored. you do that like so localStorage.getItem('key')

from that, you have to manually code a check to see if you already have the resources you need in localStorage, if not then download it from the server via ajax or whatever you prefer

Maru
  • 1,402
  • 10
  • 19
  • 1
    Thanks @Maru (+1) - I understand everything you say except for one bit. When you say "`localStorage` doesn't change the url of your resources to local files..." does that mean the user would still go to `http://myapp.example.com`? Assuming that all of the resources (HTML/JS/CSS) were already cached, would the browser still call up the site via the "normal" (online) url? Thanks again! – herpylderp Oct 27 '14 at 00:40
  • 1
    @herpylderp you need to explicitly say you want to access or store the info in `localStorage` otherwise it would still go to `http://myapp.example.com` for each item it can't find in the cache. – Maru Oct 27 '14 at 00:54
  • 1
    @herpylderp: Yes, the browser's cache works in such a way that if you ask for `http://myapp.example.com/` then the browser first looks in its cache to see if the requested resource is already retrieved and only after that it goes onto the network. This process is meant to be transparent to the user. – Bart van Ingen Schenau Oct 27 '14 at 08:28
  • Thanks again @Maru (+2 for both) - last followup question: does `localStorage` allow me to store **both** resources (such as HTML, JS and CSS) as well as app-specific data? For instance could I store `myapp.css` in the `localStorage` as well as, say, a numeric variable called `fizzBuzz`, and then access them from the cache using the same API? For instance, could I retrieve either of them via `localStorage.getItem('myapp.css')` or via `localStorage.getItem('fizzBuzz')`? Thanks again! – herpylderp Oct 27 '14 at 10:32
  • Sorry @BartvanIngenSchenau (+1) - I thought it was Maru who left the 2 comments after my first response above. Thanks for your input and my question above applies to you as well! – herpylderp Oct 27 '14 at 11:25
  • 1
    @herpylderp you're welcome, if you're happy with the answer i'd appreciate it if you accepted the answer :D – Maru Oct 27 '14 at 22:53
  • Thanks @Maru (+1) - I just had that last followup regarding `localStorage.getItem(...)` and its use with fetching files as well as variables. Any ideas? – herpylderp Oct 27 '14 at 23:27