如何使用`localStorage`来存储整个页面?

Kyl*_*yle 5 javascript html5

我一直在阅读HTML中的书,在第5章中,它展示了如何创建可以脱机运行的移动应用程序.我唯一的疑问是:我可以为整个页面执行此操作吗?你能给我一个简单但完整的例子来说明如何做到这一点吗?

提前致谢.

Pog*_*dis 7

有点疯狂,但你可以这样做:

var htmlContents = document.documentElement.innerHTML;
localStorage.setItem('myBook', JSON.stringify(htmlContents ));
Run Code Online (Sandbox Code Playgroud)

从那里你可以随时打电话给你..

localStorage.getItem('myBook');
Run Code Online (Sandbox Code Playgroud)

当然,获得实际的书籍内容而不是整个页面会更好!

还有你以后要做什么.那么它只在你的浏览器中..所以它只对你有用.对于appCahce方法,基本上您将告诉访问浏览器您希望存储在缓存中的文件,以便在用户离线时可用.

这需要在HTML属性中定义:

<html manifest="offline_book.manifest">
Run Code Online (Sandbox Code Playgroud)

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

CACHE MANIFEST
/book_index.html
/another_book.html
/maybe_some_style.css
Run Code Online (Sandbox Code Playgroud)

通过这种方式,当用户返回此页面(离线)时,他们将拥有您列出的书籍的缓存版本.

appCache特定资源的优秀资源:离线网页