so I have seen a lot of people using local storage to store certain parts of a web page but not an entire web page is it possible? , if so how? , if not is there a way to store an entire web pages data so the user can come back to it how they left it?
所以我看到很多人使用本地存储来存储网页的某些部分而不是整个网页是否可能？ ，如果是这样怎么样？ ，如果没有，有没有办法存储整个网页数据，以便用户可以回到它如何离开它？
5 个解决方案
#1
1
This can be done if you use javascript to save document.body.innerHTML into the webstorage and you use javascript to load it back from the storage when the page is loaded next time. If the web page is not in the webstorage, you could redirect the user to the web page.
如果您使用javascript将document.body.innerHTML保存到webstorage中，并在下次加载页面时使用javascript将其从存储中加载回来，则可以执行此操作。如果网页不在网络存储中，您可以将用户重定向到网页。
But this depends on the design of your web page and if there is session index etc in the body of the web page.
但这取决于您的网页设计以及网页正文中是否有会话索引等。
You should also think of some way to handle versions. You dont want your users only use the cached version of your web page, but it should be updated once you update your web page.
您还应该考虑一些处理版本的方法。您不希望您的用户仅使用您网页的缓存版本，但是一旦您更新网页就应该更新它。
The session storage is ~5mbit, so you cant save very much, especially not pictures.
会话存储大约5mbit，所以你不能节省很多，尤其不是图片。
#2
1
Since LocalStorage allows you to store about 5MB~ you can store a full webpage there and then just call it into a document.write().
由于LocalStorage允许您存储大约5MB~您可以在那里存储完整的网页，然后只需将其调用到document.write（）中。
The following code does it:
以下代码执行此操作：
Storing it:
存储它：
var HTML = ""; //html of the page goes here
localStorage.setItem("content", HTML);
Retrieving it:
检索它：
document.write(localStorage['content']);
Although this is possible it is common practice you only save settings and load them up into the right elements rather than the entire web page.
虽然这是可能的，但通常的做法是只保存设置并将其加载到正确的元素而不是整个网页中。
#3
0
Local storage it's actually just an endpoint: has an IP address and can be accessed from the web. First of all, you need to make sure that you're DNS service points on your Index page. For example, if your Local-storage's ip is 10.10.10.10 and the files on that local-storage is organized like:
本地存储它实际上只是一个端点：具有IP地址，可以从Web访问。首先，您需要确保您的索引页面上有DNS服务点。例如，如果您的本地存储的IP是10.10.10.10，并且该本地存储上的文件组织如下：
- contants:
- pages:
- index.html
- 的index.html
- page2.html
- page2.html
- pages：index.html page2.html
- images:
- welcome.png
- welcome.png
- 图片：welcome.png
- pages:
- contants：pages：index.html page2.html images：welcome.png
So you can point your DNS like: 10.10.10.10/index -> /contants/pages/index.html
因此，您可以将您的DNS指向：10.10.10.10/index - > /contants/pages/index.html
In most of the web frameworks (web framework it's a library that provide built in tools that enable you to build your web site with more functionality and more easily) their is a built in module called 'route' that provide more functionality like this.
在大多数Web框架中（Web框架是一个提供内置工具的库，使您能够以更多功能更轻松地构建Web站点），它们是一个内置模块，称为“route”，提供更多这样的功能。
In that way, from you index.html file you can import the entire web site, for example:
通过这种方式，您可以从index.html文件导入整个网站，例如：
and in your routes you define for example: For all the files with the .html extension, route to -> 10.10.10.10/contants/pages/ For all the files with the .png/.jpg extension, route to -> 10.10.10.10/contants/images/
在你的路线中你定义了例如：对于所有扩展名为.html的文件，路由到 - > 10.10.10.10/contants/pages/对于所有扩展名为.png / .jpg的文件，路由到 - > 10.10。 10.10 / contants /图像/
#4
0
This is not really answering your question, but, if you are only curious how this can be done and don't need to have wide browser support, I suggest you look into Service Workers, as making websites offline is something that they solve very well.
这并没有真正回答你的问题，但是，如果你只是好奇如何做到这一点而不需要广泛的浏览器支持，我建议你研究服务工作者，因为让网站脱机是他们很好解决的问题。
One of their many capabilities is that they can act as a proxy for any request your website makes, and respond with locally saved data, instead of going to the server.
它们的众多功能之一是它们可以充当您网站所做任何请求的代理，并使用本地保存的数据进行响应，而不是转到服务器。
This allows you to write your application code exactly the same way as you would normally, with the exception of initializing the ServiceWorker (this is done only once)
这允许您以与通常相同的方式编写应用程序代码，但初始化ServiceWorker除外（这只执行一次）
https://developers.google.com/web/fundamentals/getting-started/primers/service-workers https://jakearchibald.github.io/isserviceworkerready/
https://developers.google.com/web/fundamentals/getting-started/primers/service-workers https://jakearchibald.github.io/isserviceworkerready/
#5
-1
Local storage is usually for storing key and value pairs, storing a whole page will be a ridiculous idea. Try instead a Ajax call which Returns an partial view. Use that for the purpose of manipulation in DOM
本地存储通常用于存储密钥和值对，存储整个页面将是一个荒谬的想法。尝试使用返回部分视图的Ajax调用。将其用于DOM中的操作
#1
1
This can be done if you use javascript to save document.body.innerHTML into the webstorage and you use javascript to load it back from the storage when the page is loaded next time. If the web page is not in the webstorage, you could redirect the user to the web page.
如果您使用javascript将document.body.innerHTML保存到webstorage中，并在下次加载页面时使用javascript将其从存储中加载回来，则可以执行此操作。如果网页不在网络存储中，您可以将用户重定向到网页。
But this depends on the design of your web page and if there is session index etc in the body of the web page.
但这取决于您的网页设计以及网页正文中是否有会话索引等。
You should also think of some way to handle versions. You dont want your users only use the cached version of your web page, but it should be updated once you update your web page.
您还应该考虑一些处理版本的方法。您不希望您的用户仅使用您网页的缓存版本，但是一旦您更新网页就应该更新它。
The session storage is ~5mbit, so you cant save very much, especially not pictures.
会话存储大约5mbit，所以你不能节省很多，尤其不是图片。
#2
1
Since LocalStorage allows you to store about 5MB~ you can store a full webpage there and then just call it into a document.write().
由于LocalStorage允许您存储大约5MB~您可以在那里存储完整的网页，然后只需将其调用到document.write（）中。
The following code does it:
以下代码执行此操作：
Storing it:
存储它：
var HTML = ""; //html of the page goes here
localStorage.setItem("content", HTML);
Retrieving it:
检索它：
document.write(localStorage['content']);
Although this is possible it is common practice you only save settings and load them up into the right elements rather than the entire web page.
虽然这是可能的，但通常的做法是只保存设置并将其加载到正确的元素而不是整个网页中。
#3
0
Local storage it's actually just an endpoint: has an IP address and can be accessed from the web. First of all, you need to make sure that you're DNS service points on your Index page. For example, if your Local-storage's ip is 10.10.10.10 and the files on that local-storage is organized like:
本地存储它实际上只是一个端点：具有IP地址，可以从Web访问。首先，您需要确保您的索引页面上有DNS服务点。例如，如果您的本地存储的IP是10.10.10.10，并且该本地存储上的文件组织如下：
- contants:
- pages:
- index.html
- 的index.html
- page2.html
- page2.html
- pages：index.html page2.html
- images:
- welcome.png
- welcome.png
- 图片：welcome.png
- pages:
- contants：pages：index.html page2.html images：welcome.png
So you can point your DNS like: 10.10.10.10/index -> /contants/pages/index.html
因此，您可以将您的DNS指向：10.10.10.10/index - > /contants/pages/index.html
In most of the web frameworks (web framework it's a library that provide built in tools that enable you to build your web site with more functionality and more easily) their is a built in module called 'route' that provide more functionality like this.
在大多数Web框架中（Web框架是一个提供内置工具的库，使您能够以更多功能更轻松地构建Web站点），它们是一个内置模块，称为“route”，提供更多这样的功能。
In that way, from you index.html file you can import the entire web site, for example:
通过这种方式，您可以从index.html文件导入整个网站，例如：
and in your routes you define for example: For all the files with the .html extension, route to -> 10.10.10.10/contants/pages/ For all the files with the .png/.jpg extension, route to -> 10.10.10.10/contants/images/
在你的路线中你定义了例如：对于所有扩展名为.html的文件，路由到 - > 10.10.10.10/contants/pages/对于所有扩展名为.png / .jpg的文件，路由到 - > 10.10。 10.10 / contants /图像/
#4
0
This is not really answering your question, but, if you are only curious how this can be done and don't need to have wide browser support, I suggest you look into Service Workers, as making websites offline is something that they solve very well.
这并没有真正回答你的问题，但是，如果你只是好奇如何做到这一点而不需要广泛的浏览器支持，我建议你研究服务工作者，因为让网站脱机是他们很好解决的问题。
One of their many capabilities is that they can act as a proxy for any request your website makes, and respond with locally saved data, instead of going to the server.
它们的众多功能之一是它们可以充当您网站所做任何请求的代理，并使用本地保存的数据进行响应，而不是转到服务器。
This allows you to write your application code exactly the same way as you would normally, with the exception of initializing the ServiceWorker (this is done only once)
这允许您以与通常相同的方式编写应用程序代码，但初始化ServiceWorker除外（这只执行一次）
https://developers.google.com/web/fundamentals/getting-started/primers/service-workers https://jakearchibald.github.io/isserviceworkerready/
https://developers.google.com/web/fundamentals/getting-started/primers/service-workers https://jakearchibald.github.io/isserviceworkerready/
#5
-1
Local storage is usually for storing key and value pairs, storing a whole page will be a ridiculous idea. Try instead a Ajax call which Returns an partial view. Use that for the purpose of manipulation in DOM
本地存储通常用于存储密钥和值对，存储整个页面将是一个荒谬的想法。尝试使用返回部分视图的Ajax调用。将其用于DOM中的操作