如何使用javascript保存网页

How do i save a webpage with javascript

本文关键字：保存网页 javascript 何使用      更新时间：2023-09-26

好的，所以我正在做一个测试，我正在尝试保存用户参加测试后页面的外观，这样他们就可以在服务器端的表上访问它来查看它的答案。我一直在寻找，但并没有真正找到一种方法来做到这一点。这个想法是在用户提交测试后，它会显示正确和错误的答案，保存，然后将该页面发送到表中。感谢您的帮助。

如果有人好奇，这里是我的代码：

function finishTest(){
//There are actually 37 questions on the test so far only included 3
var score = 0;
var totalQuestions = 37;

for(var questionNum = 1; questionNum<=totalQuestions; questionNum++) {
var radios = document.getElementsByName('q'+questionNum);
var uQuestion = document.getElementById("question "+questionNum).innerHTML;
for (var i = 0, length = radios.length; i < length; i++) {
    if (radios[i].checked && radios[i].value=="1"){
        score++;
        alert(radios.innerHTML);
        radios[i].parentNode.style.backgroundColor = "lawngreen";
        }else if (radios[i].checked && radios[i].value=="0"){

        alert(radios.innerHTML);
       radios[i].parentNode.style.backgroundColor = "orangered";

        }
}
}
score = parseFloat(score*100/totalQuestions).toFixed(1);
alert("You scored "+score+"%");
document.getElementById('finish').style.visibility='hidden';
}

正如lwalden所回答的，保存保存用户的输入并稍后用这些值重新填充文档通常是正确的想法，而不是保存和恢复整个文档。这是处理表单和用户输入的基本部分。

只是为了好玩，为了直接回答你的问题，这里有一个基本的例子。同样，这不是处理项目的正确方式。

在此处进行现场演示

<!DOCTYPE html>
<html>
<head></head>
<body>
  <div>
    <input type="text" placeholder="type here...">
    <button id="save-btn">Click here to save.</button>
  </div>
  <h1>Saved doc:</h1>
  <iframe id="saved-doc"></iframe>
</body>
</html>

var saveBtn = document.getElementById('save-btn');
saveBtn.addEventListener('click', function() {
  // get value of inputs and add them to the actual elements
  [].forEach.call(document.querySelectorAll('input'), function(input) {
    input.setAttribute('value', input.value);
  });
  // get the document as a string
  var doc = document.documentElement.innerHTML;
  save(doc);
});
// save it however you want, probably ajax request to a server
// in this example, I'm saving it to localStorage
function save(doc) {
  localStorage.doc = doc;
  loadSavedDoc();
}
// loading the saved doc into an iframe
function loadSavedDoc() {
  var savedDoc = document.getElementById('saved-doc');
  savedDoc.contentWindow.document.documentElement.innerHTML = localStorage.doc;
}
loadSavedDoc();

在回复您的评论时，此示例代码将帮助您了解保存和恢复用户输入的想法。在一个真实的项目中，您可能希望表单中的命名输入字段保存到对象中，并希望库/框架保持代码的最少性和干净性。

在此处进行现场演示

<input type="text">
<input type="text">
<button id="save-btn">Save</button>
<button id="load-btn">Load</button>

var saveBtn = document.getElementById('save-btn');
var loadBtn = document.getElementById('load-btn');
var textInputs = document.querySelectorAll('input[type="text"]');
saveBtn.addEventListener('click', function() {
  var vals = [];
  [].forEach.call(textInputs, function(input) {
    vals.push(input.value);
  });
  localStorage.vals = JSON.stringify(vals);
});
loadBtn.addEventListener('click', function() {
  JSON.parse(localStorage.vals).forEach(function(val, idx) {
    textInputs[idx].value = val;
  });
});

与其保存html页面，不如捕获所有变量-test answer、score、userName？，等等，你想保存在一个对象中并将该对象发送到你的服务器。

然后，您可以创建一个评论页面，当呈现时，该页面会询问服务器并显示这些详细信息。

确切地说，如何将数据发送到服务器实际上取决于服务器和数据库的设置方式。

相关文章：