Question

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

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

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

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

Answer 1

更好来存储与用户本身相关联的设置服务器端，因此设置被保存并可以在不同的浏览器/设备中看到，并且不会被删除以清除浏览器存储。 / p>

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

Answer 2

在modern Browsers上，您可以使用XMLSerializer和Blob来实现目标：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您可以使用Cookies，sessionStorage或localStorage。

Cookie和localStorage可以在不同的会话中持续存在，sessionStorage只会在浏览器关闭之前一直存在。来自MDN Web Storage API

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



localStorage也会做同样的事情，但即使关闭并重新打开浏览器也会一直存在。

使用Javascript / jQuery更改保存网页

3 个答案: