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

前端未结

关注

 2  1542

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

相关标签:

2条回答

爱一瞬间的悲伤

2021-02-06 14:20

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

0 讨论(0)

我在风中等你

2021-02-06 14:36
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
0 讨论(0)
发布评论:

提交评论
- 加载中...