我使用LocalStorage在两个视图之间切换。当我单击切换按钮时，我可以在localstorage中看到我的set键和值。但当我刷新时，我失去了当前视图。我可以对代码进行哪些更改以在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;
}
我已经重构了你的代码，这样你就可以实现渲染当前视图:
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()));
});
styles
css.dataTable {
display: none;
}
.dataGraph {
display: block;
}
脚本使用以下HTML文件:
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>