LocalStorage.getItem Value返回null

Question

我正试图在表和图之间切换。我已经编写了几个函数来保存用户切换到使用localstorage的状态。但是当我console。log localStorage。getItem，我看到值为空。我错过了什么?这是香草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()),
);
}

Answer 1

在你的代码只有我看到你有2点在这行代码localStorage..setItem("dataViewType", "table");改变这个localStorage.setItem("dataViewType", "table");我希望这是你的问题

Answer 2

您的ViewdataTable函数有一个错别字。

localStorage.setItem("dataViewType", "table");

另外，在Toggledata中有一个问题，当localStorage没有dataViewType项时，变量dataType将是null，因此不会对视图或localStorage进行更改。我建议使用视图数组并存储活动视图的索引。

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';
}