有没有一种方法可以为用户创建保存代码以恢复进度?

时间:2019-06-25 20:16:48

标签: javascript

我为其他人创建了一个待办事项列表。但是,如果您将其关闭,则必须从头开始。我想知道如何为他们创建代码以键入提示/输入来恢复他们的列表。这是我使用的代码。

var liId = 3;
var createList = 0;
function createNewItem() {
  var getText = window.prompt("What text do you want to display on this number.");
  	liId += 1;
  	var li = document.createElement("LI");
		var txt = document.createTextNode(getText);
  	li.appendChild(txt);
  	li.setAttribute("id", liId);
  	document.getElementById("myOL").appendChild(li);
}
function crossOut() {
  var cross = window.prompt("What number do you want to cross out?", "1");
  document.getElementById(cross).setAttribute("class", "checked");
}
function addTextToItem() {
  var num = window.prompt("What number do you want to change?", "1");
  var txt = window.prompt("What text do you want to add to that number?");
  document.getElementById(num).innerHTML = txt;
}
function createNewList() {
  if (createList == "1") {
    alert("You already created a new list.");
  } else {
    createList += 1;
    var ul = document.createElement("UL");
    var li1 = document.createElement("LI");
    var li2 = document.createElement("LI");
    var li3 = document.createElement("LI");
    ul.setAttribute("id", "myUL");
    li1.setAttribute("id", "one");
    li2.setAttribute("id", "two");
    li3.setAttribute("id", "three");
    document.body.appendChild(ul);
    ul.appendChild(li1);
    ul.appendChild(li2);
    ul.appendChild(li3);
  }
}
function createItemListTwo() {
  var li = document.createElement("LI");
  var id = window.prompt("What is the word form of the number you are adding into list two?\n(No capitals)");
  li.setAttribute("id", id);
  document.getElementById("myUL").appendChild(li);
}
function crossOutListTwo() {
  var cross = window.prompt("What is the word form of the number you are crossing out?\n(No capitals)", "one");
  document.getElementById(cross).setAttribute("class", "checked");
}
function addTextToItemListTwo() {
  var num = window.prompt("What is the word form of the number you want to add text to\n(No capitals)", "one");
  var txt = window.prompt("What text do you want to put on that number?");
  document.getElementById(num).innerHTML = txt;
}
h1 {
  font-family: Calibri;
  color: darkgreen;
}
p, li {
  font-family: "Trebuchet MS";
  color: blue;
}
button {
  font-family: Tahoma;
  color: orange;
  border-radius: 2.5px;
  margin-top: 10px;
}
li.checked {
  text-decoration: line-through;
  text-decoration-color: red;
}
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="code.js"></script>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todo list</title>
  </head>
  <body>
    <h1>To-do list</h1>
    <button onclick="createNewItem()">Create an Item</button>
    <br>
    <button onclick="crossOut()">Cross Something Out</button>
    <br>
    <button onclick="addTextToItem()">Add Text to an Item</button>
    <ol id="myOL">
      <li id="1"></li>
      <li id="2"></li>
      <li id="3"></li>
    </ol>
    <button onclick="createNewList()">Create a New List</button>
    <br>
    <button onclick="createItemListTwo()">Create an Item for list 2</button>
    <br>
    <button onclick="crossOutListTwo()">Cross an Item Out</button>
    <br>
    <button onclick="addTextToItemListTwo()">Add Text to an Item</button>
  </body>
</html>

我需要为每个用户生成一个新的保存密钥,因此当他们输入密钥时,它将恢复以前的状态。

0 个答案:

没有答案