使用javascript修改dom时，我该如何做到这一点，在重新加载我的网页时不会删除这些
Posted
技术标签:
【中文标题】使用javascript修改dom时，我该如何做到这一点，在重新加载我的网页时不会删除这些【英文标题】：How can I do that when modifying the dom with javascript these are not deleted when reloading my web page [duplicate] 【发布时间】：2021-12-25 17:03:19 【问题描述】：我有一个问题，如下所示：当我在重新加载网页时使用名为“guardarcambios.js”的文件修改 dom 时，我创建的元素被删除，我想知道我是怎么做的这不会发生。
这里分享一下我的html和javascript的代码：
代码 html 'index.php':
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- InventoryBox-->
<link rel="stylesheet" href="css/styles.css">
<!-- Google Fonts: Roboto-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
<!-- ICON-->
<link rel="shortcut icon" href="resources/img/icon.png" type="image/x-icon">
<title>Inventory Box</title>
</head>
<body>
<nav class="navbar navbar-light bg-light border">
<div class="row">
<div class="col">
<div class="container-fluid">
<a class="navbar-brand " href="#">
<img src="resources/img/icon.png" class="d-inline-block align-text-center">
InventoryBox
</a>
</div>
</div>
</div>
<div class="col">
<div class="container-fluid">
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<!-- Menu CUD-->
<div class="row border">
<div class="col mt-3 mb-3">
<div class="col-12" style="width: fit-content; margin: auto;">
<button data-bs-toggle="modal" href="#modalagregarproducto" role="button" style="width: 500px; height: auto;" class="btn ml-auto btn-primary" type="submit">Agregar nuevo
producto</button>
</div>
</div>
<!-- Vertically centered modal -->
<div class="modal fade" id="modalagregarproducto" aria-hidden="true" aria-labelledby="modalagregarproducto" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ModalToggleLabel">Agregar nuevo producto</h5>
<button type="button" id="btn-close" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form class="" action="" method="post" enctype="multipart/form-data">
<input type="file" class="form-control" id="file" name="file" size="20" required>
<hr>
<div id="preview">
</div>
<div class="row mb-3 mt-3">
<div class="col-5">
<label class="mt-2" for="id">ID: </label>
</div>
<div class="col-7 ">
<input class="form-control" type="number" name="id" id="id" placeholder="ID" required>
</div>
</div>
<div class="row mb-3">
<div class="col-5">
<label class="mt-2" for="nombre">Nombre del producto: </label>
</div>
<div class="col-7">
<input class="form-control" type="text" name="nombreProducto" id="nombreProducto" placeholder="Nombre del producto" required>
</div>
</div>
<div class="row mb-3">
<div class="col-5">
<label class="mt-2" for="modeloProducto">Modelo: </label>
</div>
<div class="col-7">
<input class="form-control" type="text" name="modeloProducto" id="modeloProducto" placeholder="Modelo del producto" required>
</div>
</div>
<div class="row mb-3">
<div class="col-5">
<label class="mt-2" for="numeroProducto">Número: </label>
</div>
<div class="col-7 ">
<input class="form-control" type="number" name="numeroProducto" id="numeroProducto" placeholder="Número de productos" required>
</div>
</div>
<div class="col d-grid gap-2">
<input type="submit" id="guardarcambios" name="guardarcambios" class="btn btn-primary" data-bs-target="#ModalToggle2" value="Guardar cambios">
</div>
</form>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- JavaScript -->
<script src="js/vistaprevia.js"></script>
<script src="js/descartar.js"></script>
<script src="js/guardarcambios.js"></script>
</body>
</html>
代码 javascript 'guardarcambios.js'：
window.onload = function ()
const btnGuardarCambios = document.getElementById('guardarcambios')
btnGuardarCambios.addEventListener("click", function ()
// 1: Obtener los valores de los inputs por medio de los id.
const imagen = document.getElementById("file").value // C:\fakepath\0-6277_firewatch-wallpaper-8k-hd-wallpaper-download-high-resolution.jpg
console.log(imagen)
const nombreProducto = document.getElementById("nombreProducto").value // Manilla
const modeloProducto = document.getElementById("modeloProducto").value // 0x00
const numeroProducto = document.getElementById("numeroProducto").value // 25
// 2: Crear cada uno de los elementos que conforman a una card en javascript.
const createDiv = document.createElement("div") // <div></div>
const createImg = document.createElement("img") // <img></img>
const createDivBody = document.createElement("div") // <div></div>
const createH5 = document.createElement("h5") // <h5></h5>
const createP = document.createElement("p") // <p></p>
const createButton1 = document.createElement("button") // <button></button>
const createButton2 = document.createElement("button") // <button></button>
// 3: Insertar los valores de los inputs en sus respectivos elementos creados.
createImg.setAttribute("src", imagen) // <img src="C:\fakepath\0-6277_firewatch-wallpaper-8k-hd-wallpaper-download-high-resolution.jpg"></img>
createImg.setAttribute("style", "width: 100px; heigt: 50px")
createImg.setAttribute("class", "img-thumbnail")
createH5.innerText = nombreProducto // <h5>Manilla</h5>
createP.innerText = `Modelo producto: $modeloProducto Número de productos: $numeroProducto` // <p>Modelo producto: 0x00 Número de productos: 25</p>
createButton1.innerText = "Modificar" // <button>Modificar</button>
createButton2.innerText = "Eliminar" // <button>Eliminar</button>
// 4: Estructurar el elemento
createDiv.appendChild(createImg)
createDiv.appendChild(createDivBody)
createDivBody.appendChild(createH5)
createDivBody.appendChild(createP)
createDivBody.appendChild(createButton1)
createDivBody.appendChild(createButton2)
// 5: Mostrar en el window del navegador el elemento estructurado.
document.body.appendChild(createDiv)
)
我不需要编写代码，我只需要告诉我如何确保我使用 javascript 修改的内容不会被删除。非常感谢。
【问题讨论】：
如果您在 DOM 中进行更改，它们仅存在于浏览器中。如果您不对服务器上的源代码进行相应的更改，刷新页面时它们将丢失，除非您再次使用 JavaScript 进行相同的更改。 【参考方案1】：您没有在 html 文件中的任何位置调用“guardarcambios.js”。
另外，不确定它是否是由于复制和粘贴造成的，可能不是大问题，但在您的
【参考方案2】：我不确定这是否是原因，但我没有您所有的 JS 文件需要确认。在我的本地机器上运行时，它显示下图中的错误。
[
【讨论】：
你不和谐，要分享所有文件，不多，或者我可以用.ngrok链接分享 @AdalbertoGranjaValencia 问题不在于缺少文件，我截图的这个文件是我本地电脑上的一个。在此处查看您帖子的顶部，您将看到一个指向另一个主题的链接，该主题将在此处进一步讨论，您将在那里找到您的答案以及您遇到问题的原因:)以上是关于使用javascript修改dom时，我该如何做到这一点，在重新加载我的网页时不会删除这些的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 HTML 或 JavaScript 下载当前的 DOM？
Javascript 不适用于 ujs 新生成的 DOM 元素