Homework Help is Here – Start Your Trial Now!
Engineering
Computer Science
Computer Science 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?

Computer Science 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?

COMPREHENSIVE MICROSOFT OFFICE 365 EXCE
COMPREHENSIVE MICROSOFT OFFICE 365 EXCE
1st Edition
ISBN:9780357392676
Author:FREUND, Steven
Publisher:FREUND, Steven
Chapter8: Working With Trendlines, Pivottables, Pivotcharts, And Slicers
Section: Chapter Questions
Problem 8EYW
See similar textbooks
icon
Related questions
Question

Computer Science

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?

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

CSS

.dataTable {
display: none;
}
.dataGraph {
display: block;
}
Expert Solution
steps

Step by step

Solved in 2 steps

SEE SOLUTIONCheck out a sample Q&A here
Blurred answer
Knowledge Booster
JQuery and Javascript
Learn more about
Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.
Similar questions
  • SEE MORE QUESTIONS
Recommended textbooks for you
COMPREHENSIVE MICROSOFT OFFICE 365 EXCE
COMPREHENSIVE MICROSOFT OFFICE 365 EXCE
Computer Science
ISBN:
9780357392676
Author:
FREUND, Steven
Publisher:
CENGAGE L
Np Ms Office 365/Excel 2016 I Ntermed
Np Ms Office 365/Excel 2016 I Ntermed
Computer Science
ISBN:
9781337508841
Author:
Carey
Publisher:
Cengage
Oracle 12c: SQL
Oracle 12c: SQL
Computer Science
ISBN:
9781305251038
Author:
Joan Casteel
Publisher:
Cengage Learning
SEE MORE TEXTBOOKS