How can I use `localStorage` to store an entire page?

Question

I've been reading the book HTML in action and in chapter 5, it shows how to create a mobile application that can be run offline. My only doubt is: can I do this for an entire page? Can you give me a simple, but complete, example on how to do it?

Thanks in advance.

Look into this: http://stackoverflow.com/questions/11271898/how-to-save-a-webpage-locally-including-pictures-etc — sk786, Jun 15 '15 at 13:57
Look into [AppCaching](https://developer.mozilla.org/en/docs/Web/HTML/Using_the_application_cache). — Sebastian Simon, Jun 15 '15 at 13:57
for an entire page you should use a manifest file. not the local storage, it is too small. — , Jun 15 '15 at 13:58
Oh, how can I do it? @ maboiteaspam 21, Sorry for my dumbness, I'm new to HTML5, I'm still learning :) — Kyle, Jun 15 '15 at 14:00

score 7 · Accepted Answer · edited Jun 15 '15 at 14:21

7

Kinda crazy but you could do it like so:

var htmlContents = document.documentElement.innerHTML;
localStorage.setItem('myBook', JSON.stringify(htmlContents ));

From there you can call it up whenever you like..

localStorage.getItem('myBook');

It would be better of course to get the actually book contents of course instead of the entire page!

Also as for what you want to do with this later. Well its only in your browser.. so its accessible only to you. for the appCahce method, basically you will be telling the visiting browser of the files you wish to store in the cache so they are available when the user is offline.

This needs to be defined in the HTML attribute:

<html manifest="offline_book.manifest">

This offline_book.manifest will contain the file list to store in the cache.

CACHE MANIFEST
/book_index.html
/another_book.html
/maybe_some_style.css

Through this, then when the users come back to this page (offline), they will have a cached version of the books you have listed.

An excellent resource into the appCache specifics: Offline Webpages

edited Jun 15 '15 at 14:21

Kyle

1,568
2
20
46

answered Jun 15 '15 at 13:59

Pogrindis

7,755
5
31
44

Would the user be able to load the entire page offline? – Kyle Jun 15 '15 at 14:03
If you stored javascript in their cache that could retrieve it on load, then yes certainly, but most likely the `appCaching` is the better option for your situation. – Pogrindis Jun 15 '15 at 14:04
Could you make an example using app cache, I will mark it as the answer immediately :) – Kyle Jun 15 '15 at 14:07
Ill add an example now, its quite simple. – Pogrindis Jun 15 '15 at 14:08
@Calne as you can see from the example, there is no black magic, just a notifier telling the browser what needs to be available offline! – Pogrindis Jun 15 '15 at 14:13
Oh yeah, I see it, I'm going to try it, Thank you! – Kyle Jun 15 '15 at 14:18

score 1 · Answer 2 · answered Jun 15 '15 at 13:59

For example you can use localStorage for saving variable:

// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

and get it after:

localStorage.getItem('lastname');

window.localStorage implemented follow interface which accepted by W3C:

interface Storage {
  readonly attribute unsigned long length;
  [IndexGetter] DOMString key(in unsigned long index);
  [NameGetter] DOMString getItem(in DOMString key);
  [NameSetter] void setItem(in DOMString key, in DOMString data);
  [NameDeleter] void removeItem(in DOMString key);
  void clear();
};

How can I use `localStorage` to store an entire page?

2 Answers2

Linked