Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 531
Kyle Avatar asked Jun 15 '15 13:06

Kyle


2 Answers

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

like image 136
Pogrindis Avatar answered Nov 14 '22 21:11

Pogrindis


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();
};

More information you can read here

like image 28
Alex Filatov Avatar answered Nov 14 '22 21:11

Alex Filatov