Estoy tratando de alternar entre una tabla y un gráfico. He escrito un par de funciones para guardar el estado en el que el usuario cambia a usar el almacenamiento local. Pero cuando hago console.log localStorage.getItem, veo el valor como nulo. ¿Qué me estoy perdiendo? Esto es vainilla Javascript
const data = document.querySelectorAll("button.data"); const dataTable = document.querySelector(".dataTable"); const dataGraph = document.querySelector(".dataGraph"); const ViewdataGraph = () => { dataTable.style.display = "none"; dataGraph.style.display = "block"; data.forEach( (element) => (element.innerText = "View data Table")); localStorage.setItem("dataViewType", "Graph"); } const ViewdataTable = () => { dataGraph.style.display = "none"; dataTable.style.display = "block"; data.forEach( (element) => (element.innerText = "View data Graph")); localStorage.setItem("dataViewType", "table"); } const Toggledata = () => { const dataType = localStorage.getItem("dataViewType"); if (dataType) { if (dataType === "table") { ViewdataTable(); } else if (dataType === "Graph") { ViewdataGraph(); } } }; window.addEventListener("DOMContentLoaded", (event) => { const data = document.querySelectorAll("button.data"); data.forEach((element) => element.addEventListener("click", (event) => ToggleData()), ); }en su código solo veo que tiene 2 puntos en esta línea de código localStorage..setItem("dataViewType", "table"); cambiar a este localStorage.setItem("dataViewType", "table"); espero que este sea tu problema
Tiene un error tipográfico en su función ViewdataTable .
localStorage.setItem("dataViewType", "table");
Además, hay un problema en Toggledata , cuando localStorage no tiene un elemento dataViewType , la variable dataType será null , por lo tanto, no se realizarán cambios en su vista o localStorage . Sugiero usar una matriz de vistas y almacenar el índice de la vista activa.
const views = [ { elem: dataTable, name: 'Table' }, { elem: dataGraph, name: 'Graph' }, ]; let viewIndex = -1; const Toggledata = () => { views[viewIndex].elem.style.display = "none"; viewIndex++; // wrapping if (viewIndex >= views.length) { viewIndex = 0; } const view = views[viewIndex]; view.elem.style.display = "block"; data.forEach(element => (element.innerText = `View data ${view.name}`)); localStorage.setItem("dataViewType", String(viewIndex)); }; window.addEventListener("DOMContentLoaded", (event) => { const data = document.querySelectorAll("button.data"); data.forEach((element) => element.addEventListener("click", (event) => ToggleData()), ); // use first view if dataViewType is not set viewIndex = Number(localStorage.getItem("dataViewType") || "0"); // not a valid value if (Number.isNaN(viewIndex) || !(viewIndex in views)) { viewIndex = 0; } // maybe not necessary if HTML style sets display to none by default views.forEach(v => (v.elem.style.display = 'none')); views[viewIndex].elem.style.display = 'block'; }