Страница отображается снова каждый раз, когда вы обновляете страницу. Блок JavaScript будет выполнен снова. Таким образом, ничто из того, что вы создаете, не «внедрит» в ваш файл код или останется там навсегда.
Однако есть решения, которые могут помочь вам достичь этого (или смоделировать). Например, localStorage или sessionStorage . Лично я бы использовал localStorage для этой цели (если только не включены некоторые конфиденциальные данные, например, информация о банковском счете и тому подобное). При загрузке страницы, где должна отображаться ваша форма, вы немедленно вызываете метод для получения существующего объекта данных внутри localStorage, например, localStorage.getItem(data). Свойства localStorage и sessionStorage позволяют сохранять пары ключ / значение в веб-браузере. Объект 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-код не виден, нажмите кнопку «Полная страница». (информация здесь ).
Обратите внимание на функции saveTask и drawSavedTasks. drawSavedTasks вызывается первым, поэтому все, что вы сохранили, будет перерисовано. Кроме того, я сохраняю не весь ранее созданный объект, а только некоторую соответствующую информацию о нем, поэтому я могу создать его заново.
Другое решение было бы, если бы вы использовали базу данных и / или структуру. Здесь, так же как и с localStorage, вы можете сохранить некоторые метаданные об объектах и легко перерисовать их при перезагрузке. Например, angularjs имеет директиву под названием ng-repeat, где для каждого элемента в массиве будет создан новый элемент при визуализации страницы. Это также можно сделать с помощью реакции или даже Laravel, если вы используете php.
@foreach($itemas $itemsList)
<div>
Some data
</div>
@endforeach
Надеюсь, это помогло вам.
Ура!