Estoy alternando entre dos vistas usando LocalStorage. Puedo ver mi clave y valor establecidos en el almacenamiento local cuando hago clic en el botón de alternancia. Pero cuando actualizo, pierdo la vista actual. ¿Qué cambios puedo hacer en el código para guardar la vista en localStorage?
let dataType = localStorage.getItem("dataViewType"); const toggleData = () => { const data = document.querySelectorAll("button.data"); const dataTable = document.querySelector(".dataTable"); const dataGraph = document.querySelector(".dataGraph"); 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") ); } }; const toggleDataonClick = () => { dataType = localStorage.getItem("dataViewType") if (dataType) { toggleData() } } window.addEventListener("DOMContentLoaded", (event) => { const data = document.querySelectorAll("button.data"); data.forEach((element) => element.addEventListener("click", (event) => TtoggleDataonClick()), ); } **CSS** .dataTable { display: none; } .dataGraph { display: block; }He refactorizado su código para que pueda lograr renderizar la vista actual:
guión.js
// The new states will be saved as such: // table -> to display the dataTable element // graph -> to display the dataGraph element // Separate the render from the toggle const renderView = (dataType) => { const data = document.querySelectorAll("button.data"); const dataTable = document.querySelector(".dataTable"); const dataGraph = document.querySelector(".dataGraph"); dataTable.style.display = dataType === "table" ? "block" : "none"; dataGraph.style.display = dataType === "graph" ? "block" : "none"; const label = getLabel(dataType); data.forEach((element) => { element.innerText = `View data as ${label}`; }); } // A little function to get the next toggle state const getNextType = (dataType) => { return dataType === "table" ? "graph" : "table"; } // A little function to get the current state label const getLabel = (dataType) => { return dataType === "table" ? "Table" : "Graph"; } // The actual toggle function const toggleDataOnClick = () => { const dataType = localStorage.getItem("dataViewType"); if (dataType) { // Get the next state const nextType = getNextType(dataType); // Store it in the localStorage localStorage.setItem("dataViewType", nextType); // Render the view renderView(nextType); } } // This event runs when the DOM content is loaded window.addEventListener("DOMContentLoaded", (event) => { // Get the current saved state const dataType = localStorage.getItem("dataViewType"); // Render the view renderView(dataType); // Add the click event listeners for the view const data = document.querySelectorAll("button.data"); data.forEach((element) => element.addEventListener("click", (event) => toggleDataOnClick())); });estilos.css
.dataTable { display: none; } .dataGraph { display: block; }El script funciona con este archivo HTML:
índice.html
<html> <head> <title>Toggle View</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="dataTable"> <button class="data"></button> </div> <div class="dataGraph"> <button class="data"></button> </div> <script src="script.js"></script> </body> </html>