如何使用 `localStorage` 存储整个页面？答案

【问题标题】：How can I use `localStorage` to store an entire page?如何使用 `localStorage` 存储整个页面？
【发布时间】：2017-05-29 02:40:35
【问题描述】：

我一直在阅读HTML in action一书，在第 5 章中，它展示了如何创建可以离线运行的移动应用程序。我唯一的疑问是：我可以为整个页面执行此操作吗？你能给我一个简单但完整的例子吗？

提前致谢。

【问题讨论】：

看看这个：stackoverflow.com/questions/11271898/…
查看AppCaching。
对于整个页面，您应该使用清单文件。不是本地存储，太小了。
哦，我该怎么办？ @ maboiteaspam 21，对不起我的愚蠢，我是 HTML5 的新手，我还在学习 :)

标签： javascript html

【解决方案1】：

有点疯狂，但你可以这样做：

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

从那里你可以随时调用它..

localStorage.getItem('myBook');

当然最好是获取实际的书籍内容而不是整个页面！

还有你以后想用这个做什么。好吧，它仅在您的浏览器中..因此只有您可以访问。对于 appCahce 方法，基本上您将告诉访问浏览器您希望存储在缓存中的文件，以便在用户离线时可用。

这需要在HTML属性中定义：

<html manifest="offline_book.manifest">

这个offline_book.manifest 将包含要存储在缓存中的文件列表。

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

通过此操作，当用户返回此页面（离线）时，他们将拥有您列出的图书的缓存版本。

了解appCache 细节的绝佳资源：Offline Webpages

【讨论】：

用户能否离线加载整个页面？
如果您将 javascript 存储在可以在加载时检索它的缓存中，那么当然可以，但很可能appCaching 是适合您情况的更好选择。
你能用应用缓存做一个例子吗，我马上把它标记为答案:)
我现在添加一个例子，它很简单。
@Calne 正如您从示例中看到的那样，没有什么黑魔法，只是一个通知器告诉浏览器需要离线使用什么！

【解决方案2】：

例如，您可以使用localStorage 来保存变量：

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

然后得到它：

localStorage.getItem('lastname');

window.localStorage实现了accepted by W3C的follow接口：

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

更多信息可以阅读here

【讨论】：

感谢您阐明如何使用“localStorage”+1 :)