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.
2 answers
solution1
7 ACCPTED 2015-06-15 13:59:30
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
solution2
1 2015-06-15 13:59:11
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.