保存网页与Javascript/jQuery的变化

Saving Webpage With Javascript/jQuery Changes

本文关键字：变化 jQuery Javascript 保存网页      更新时间：2023-09-26

我很好奇是否有一种方法可以让用户在通过Javascript/jQuery进行更改后保存完整的网页。根据我的理解，这只可能与服务器端编码-但我无法找到一个明确的答案。

举个简单的例子，我将允许用户自定义网页的背景颜色和文本，然后将更改保存到本地机器。

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

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

在现代浏览器上，您可以使用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>

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

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

您可以使用Cookies, sessionStorage或localStorage。

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

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

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

相关文章：