Estoy alternando entre un gráfico y una vista de tabla de datos. Estoy usando almacenamiento local para salvar el estado. Desde mi consola, puedo ver que dataViewType no está configurado ni guardado en mi almacenamiento local. Estoy usando JavaScript estándar, ¿qué me estoy equivocando o me estoy perdiendo?
Actualización: ahora puedo configurar dataViewType, pero ¿cómo puedo obtenerlo/preservar el estado al actualizar? El código refleja nuevos cambios.
const toggleData = () => { const data = document.querySelectorAll("button.data"); const dataTable = document.querySelector(".dataTable"); const dataGraph = document.querySelector(".dataGraph"); let dataType = localStorage.getItem("dataViewType"); if (dataType = "block") { if (dataTable.style.display === "block") { dataTable.style.display = "none"; dataGraph.style.display = "block"; data.forEach( (element) => (element.innerText = "View data as Table"), localStorage.setItem("dataViewType", "block") ); } else { dataGraph.style.display = "none"; dataTable.style.display = "block"; data.forEach( (element) => (element.innerText = "View data as Graph"), localStorage.setItem("dataViewType", "none") ); } } }; window.addEventListener("DOMContentLoaded", (event) => { const data = document.querySelectorAll("button.data"); data.forEach((element) => element.addEventListener("click", (event) => ToggleData()), ); }La lógica en su rutina de alternancia es incorrecta. En primer lugar, ninguna de las funciones se ejecutará a menos que ya haya algo almacenado en dataViewType en el almacenamiento local y, si hay algo almacenado, la misma función se ejecutará una y otra vez, porque establece el mismo valor que activa la ejecución de esa función. ..
Entonces, lo que necesita es eliminar if (dataType) { y cambiar lugares de otras condiciones:
const Toggledata = () => { const dataType = localStorage.getItem("dataViewType"); if (dataType === "Graph") { ViewdataTable(); } else if (dataType === "Table") { ViewdataGraph(); } };