使用 Javascript/jQuery 更改保存网页

Question

我很好奇是否有办法让用户在通过 Javascript/jQuery 进行更改后保存完整的网页。 据我所知，这只能通过服务器端编码实现 - 但我无法找到明确的答案。

作为一个简单的例子，我将允许用户自定义网页的背景颜色和文本等内容，然后将他们的更改保存到他们的本地机器上。

编辑：我要创建的资源需要作为网页保存到本地机器 - 因此在浏览器中存储信息并不理想。

这些资源将用于名为 OBS 的程序，用户基本上将通过本地保存的文件导入保存的元素。

Answer 1

在现代浏览器上，您可以使用XMLSerializer和Blob来实现它：

 document.querySelector('input').onchange = function() { document.body.style.backgroundColor = this.value; } document.querySelector('button').onclick = function() { var a = document.createElement('a'); // serialize the whole document as a string var doc = new XMLSerializer().serializeToString(document.documentElement); // convert this string to a blob object if (window.Blob) { var blob = new Blob([doc], {type: 'text/html'}); // create a blob URL a.href = URL.createObjectURL(blob); } else //browser don't support Blob object, create a data url a.href = 'data: text/html; charset=utf8, ' + doc; /* The following won't work in the snippet but can be used on your server for browsers supporting download attribute if ('download' in a) { a.download = 'yourPageName.html'; document.body.appendChild(a); a.click(); document.body.removeChild(a); } else {*/ a.innerHTML = 'Right click - Save As.. to download the page'; document.body.appendChild(a); // } }

 Hello <input placeholder="choose a background color" /> <button>save</button>

Answer 2

最好将那些与用户本身相关联的设置存储在服务器端，这样设置被保存并可以在不同的浏览器/设备中看到，并且不会被删除清除浏览器存储。

无论如何，正如已经说明的那样，可以使用浏览器本地存储来完成

Answer 3

您可以使用Cookies 、 sessionStorage或localStorage 。

Cookies 和 localStorage 可以通过不同的会话持续存在，sessionStorage 只持续到浏览器关闭。 来自MDN Web Storage API

• sessionStorage 为每个给定的源维护一个单独的存储区域，在页面会话期间可用（只要浏览器打开，包括页面重新加载和恢复）

• localStorage 做同样的事情，但即使在浏览器关闭并重新打开时仍然存在。