javascript - 使用本地存储的变量来清除间隔

Question

我在页面上有一个按钮，单击它会链接到另一个页面并将本地存储的变量设置为“true”。在新页面上，我有一个用 setInterval 函数隐藏的 div。如果变量设置为“true”，我希望所说的 setInterval 不会触发。

HTML:

<!--Page 1-->
<a href="page2.html">
  <div id="view" class="mainButton">view progress</div>
</a>

<!--Page 2-->
<div id="showChart">
  <p>view progress</p>
</div>

<div id="containChart">
  <!--Chart-->
  <canvas id="theChart" width="400" height="400"></canvas>
  <!--Back to Profile-->
  <div id="closeChart">close</div>
</div>

JavaScript(一些 jQuery):

displayChart();

var timeIt;

function displayChart() // Hides chart shortly after loading of page.
{
  var timeIt = setTimeout(function()
  {
    document.getElementById("containChart").style.display = "none";
  }, 0.1);

  var condition = localStorage.quickAccess;
  if(condition === true)
  {
    clearTimeout(timeIt);
  }
}

// Keep chart displayed if clicked.
$("#view").click(function()
{
  localStorage.quickAccess = true;
});

// Show Progress Chart.
$("#showChart").click(function()
{
  $("#containChart").css("display", "block");
  console.log(localStorage.quickAccess); // Logs correctly: if "#view" was clicked returns "true".
});

// Hide Progress Chart.
$("#closeChart").click(function()
{
  $("#containChart").css("display", "none");
});

Answer 1

localStorage 将您放入其中的任何内容存储为字符串。

因此 localStorage.quickAccess === true 将返回 false，因为 "true"!= true。

一个简单的替代方法是执行 localStorage.quickAccess === "true"。