Save Toggle View State using Local Storage in Vanilla JavaScript

I am toggling between two views using LocalStorage. I can see the my set key and value in localstorage when I click the toggle button. But when I refresh, I lose the current view. What changes can I make to the code to save view in 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;
    }

JavaScript
​x
 
     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;
    }
​

Answer

I have refactored your code so that you can achieve to render the current view:

script.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()));
});

JavaScript
 
// 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()));
});
​

styles.css

.dataTable {
  display: none;
}
    
.dataGraph {
  display: block;
}

JavaScript
 
.dataTable {
  display: none;
}
    
.dataGraph {
  display: block;
}
​

The script works with this HTML file:

index.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>

JavaScript
 
<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>
​

Advertisement

Answer