Tengo una tabla que se genera automáticamente a través de la aplicación javascript.
Vea el sitio de prueba aquí: https://hhpricetools.com/3d-wood-designer/
La tabla de resumen está en la última pestaña o puede hacer clic en "ver resumen" en la parte superior para acceder a ella.
La tabla que se completa según las opciones del usuario se ve así:
<table id="summary-table" class="hhpt-summarytable"><tbody> <tr><td>Style: <b>Side Lofted Barn</b></td> <td> </td></tr> <tr><td>Size: <b>10' x 16'</b></td><td> </td></tr> <tr><td>Siding: <b>LP Smartside - Painted</b></td><td> </td></tr> <tr><td>Wall Color: <b>Quest Gray #7080</b></td><td> </td></tr> <tr><td>Trim Color: <b>White</b></td><td> </td></tr> <tr><td>Roof: <b>Radiant Barrier LP Techshield</b></td><td> </td></tr><tr><td> </td></tr></tbody></table>Que quiero guardar en localStorage. Por alguna razón, estoy "indefinido" en el sitio web real anterior. Sin embargo, jsfiddle funciona bien. ¿Por qué no está haciendo lo mismo en el sitio web?
var table_copy = $('#summary-table').html(); localStorage.setItem('table',table_copy); console.log(localStorage.getItem("table"));Hay algunos métodos que puede hacer para asegurarse de que su JavaScript se cargue después de que se cargue el DOM/HTML.
1. Usar defer
Puede usar defer para cargar el JavaScript después de que se haya cargado el HTML.
Para hacer esto, simplemente puede agregar el siguiente atributo.
<script defer src="index.js"></script>Esto debería esperar hasta que el DOM se haya cargado antes de cargar el JavaScript.
2. Agregue <script> a <body>
Otra solución es agregar la etiqueta del script al final del body . Esto hará que el código JavaScript se cargue después de que se haya cargado todo el HTML.
3. Espera en JavaScript
También puede esperar a que se cargue el DOM en JavaScript (sin JQuery).
Hay dos métodos.
Puede utilizar el detector de eventos DOMContentLoaded . Esto esperará hasta que se haya cargado el HTML. Sin embargo, no esperará a que se carguen las imágenes, las hojas de estilo, etc.
Para usar esto, puede usar addEventListener() .
window.addEventListener("DOMContentLoaded", () => { // Code here will execute only after the DOM has loaded... }); También puede usar el evento de load , que se cargará después de que se haya cargado el HTML, así como imágenes, hojas de estilo, etc.
También puede usar este oyente con addEventListener .
window.addEventListener("load", () => { // Code here will execute after everything has loaded... }); Puede hacer lo mismo con la propiedad del controlador de eventos onload .
window.onload = () => { // Code here will execute after everything has loaded... };En conclusión, hay muchas formas de hacer que el JavaScript espere hasta que se haya cargado el DOM.
Debe asegurarse de que el DOM se haya cargado por completo antes de intentar almacenar el HTML.
Prueba lo siguiente:
$('document').ready(function() { var table_copy = $('#summary-table').html(); localStorage.setItem('table',table_copy); console.log(localStorage.getItem("table")); });