Question

实际上，我正在列出...首先，我获取用户信息并将其存储到mysql数据库中。当用户单击“添加”按钮时，列表的新元素将作为列表的一部分出现在列表的底部，该部分已经用html编码。现在的问题是，当我刷新页面时，列表的新创建元素消失了吗？有什么建议吗？

<html>
                  <ul id="list" class="list-group" style="margin-top:20vh ;opacity:0.3;">
                        <a href="#"  class="list-group-item list-group-item-action active" id="myBtn"><span class="badge badge-primary badge-pill">+</span>Add shop</a>

                        <a href="#" onclick="location.href='action.php';" class="list-group-item list-group-item-action" id="bg" >Emporium</a>
                    </ul>
  </html>  
<script>
function newuser() {
        var ul = document.getElementById("list");
        var li = document.createElement("a");
        li.appendChild(document.createTextNode("<?php echo $row3['shopname'] ?>"));

        li.setAttribute("id", "bg"); // added line
        li.setAttribute("class", "list-group-item list-group-item-action");
        li.setAttribute("href", "#");
        //    li.insertBefore(li, ul.children[0]);
        ul.appendChild(li);

    }
</script>

Answer 1

重新加载页面时，JS文件将重新加载并再次执行，因此，如果您希望基于某个事件执行某些操作并在重新加载后存储该操作事件，请使用Cookie，本地存储或会话存储并存储一些标志，基于此触发您的页面加载功能。

Answer 2

每次刷新页面时，页面都会再次呈现。 JavaScript块也将再次执行。因此，您创建的任何内容都不会将带有代码的文件“注入”或永久保存在文件中。

但是，有些解决方案可以帮助您实现（或模拟）它。例如，localStorage或sessionStorage。就个人而言，我会为此目的使用localStorage（除非其中包括一些敏感数据，例如银行帐户信息和类似内容）。在显示表单的页面加载中，您立即调用一种方法来获取localStorage中的现有数据对象，例如localStorage.getItem(data)。 localStorage和sessionStorage属性允许将键/值对保存在Web浏览器中。 localStorage对象存储没有到期日期的数据。当浏览器关闭时，数据不会被删除，并且在第二天，每周或每年都可用。

例如，如果要将元素保留在待办事项列表中，则可能需要执行以下操作：

const addButton = document.querySelector("#addToDo");
const delBtn = document.querySelector("#delToDo");

addButton.addEventListener("click", addTask, false);
var tasksID = 0;

function saveTask(taskID, taskInfo) {
  // Get tasks from local storage
  let tasks = localStorage.getItem("todo-tasks");

  if (!tasks) {
    tasks = {};
  } else {
    tasks = JSON.parse(tasks);
    tasks[taskID] = taskInfo;
  }

  // Save the result back
  let infobj = JSON.stringify(tasks);
  localStorage.setItem("todo-tasks", infobj);
}

function drawSavedTasks() {
  let tasks = localStorage.getItem("todo-tasks");
  if (tasks) {
    tasks = JSON.parse(tasks);
    Object.keys(tasks).forEach(k => {
      addTask(null, tasks[k]);
    });
  }
}

drawSavedTasks();

function addTask(e, textToDo = undefined) {
  if (!textToDo) {
    textToDo = document.querySelector("#toDo").value;
  }

  var list = document.querySelector(".list");
  var divToDo = document.createElement("div");
  var p = document.createElement("p");
  var delButton = document.createElement("button");

  divToDo.setAttribute("id", "todo" + tasksID);
  divToDo.setAttribute("class", "toDo");
  delButton.classList.add("delToDo");

  delButton.textContent = "Delete";
  p.textContent = textToDo;

  delButton.onclick = function() {
    divToDo.parentNode.removeChild(divToDo);
  }

  divToDo.appendChild(p);
  divToDo.appendChild(delButton);

  list.appendChild(divToDo);
  saveTask(tasksID, textToDo);
  ++tasksID;
}

.toDo {
  width: 200px;
  height: 80px;
  border: 1px solid black;
  margin: 5px;
  padding: 5px;
  text-align: center;
  background-color: yellow;
}

<div class="form">
  <input type="text" id="toDo" placeholder="To do...">
  <button id="addToDo">Add</button>
</div>

<div class="list">

</div>

注意：jsfiddle尚未损坏！ 由于JSFiddle将代码加载到iframe下，因此您必须在开发人员控制台上选择代码，然后再运行代码以使localStorage正常工作，否则可能会在本地对其进行测试。如果看不到HTML，请按“整页”按钮。（信息here）。

请注意功能saveTask和drawSavedTasks。首先drawSavedTasks被调用，所以您保存的所有内容都会被重画。另外，我不会保存整个先前创建的对象，而只是保存一些有关它的相关信息，因此我可以重新创建它。

另一种解决方案是，如果您使用数据库和/或框架。在这里，与localStorage一样，您可以保存有关对象的一些元数据，并在重新加载时轻松重绘它们。例如，angularjs有一个名为ng-repeat的指令，其中对于数组中的每个项目，在呈现页面时都会创建一个新元素。如果您使用php，也可以使用react甚至laravel来完成。

@foreach($itemas $itemsList)
    <div>
        Some data
    </div>
@endforeach

希望这对您有所帮助。干杯！

如何防止JavaScript重新创建的新元素在刷新时消失？

2 个答案: