它说即使我没有访问过该站点（本地存储）答案

【问题标题】：It says I've visited the site even if I haven't (local storage)它说即使我没有访问过该站点（本地存储）
【发布时间】：2019-05-07 19:02:29
【问题描述】：

问候stackoverflow的居民。我有个问题。我正在尝试在我的投资组合中编写一些东西，每次我访问我的一个项目时，当用户返回时，“你访问过 X”就会登录到控制台。为了证明概念，我在我的名为“火车计时器”的项目中进行了尝试。但是，它在控制台中说，即使我没有访问过火车计时器，我也已经访问过。即使我清除了所有的浏览数据/历史记录/其他内容，也会发生这种情况。这是怎么回事？这是我的代码。

<!DOCTYPE html>
<html lang ="en-us">
<head>
  <meta charset="UTF-8">
  <title>Portfolio</title>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="style.css">

   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
   <style>

  #content {
    display: none;
  }
  .thumbnail:hover {
    border-style: solid;
    border-width: 3px;
    border-color:#E67F18;
  }
</style>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

   </head>




<body onload="showStuff()">


  <nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="index.html">Dennis Markham</a>
    </div>
    <ul class="nav navbar-nav">
      <li><a href="index.html">About Me</a></li>
      <li class = "active"><a href="portfolio.html">Portfolio</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </div>
</nav>


<!-- <div class ="container">
<section class ="row">
<div class ="col-md-1">
</div>
<div class="col-md-10"> 
<a href = "https://dennismarkham.github.io/trainTime/"> <img class = "portfolio" src = "images/dummy_image.png" alt ="train simulator"><span class = "caption">Train Timer </span></img></a> 
<a href = "https://dennismarkham.github.io/week-4-game/"><img class = "portfolio" src = "images/dummy_image.png" alt ="crystal collector"></img></a>
<a href = "#"><img class = "portfolio" src = "images/dummy_image.png" alt ="coming soon..."></img></a>
</div>
<div class = "col-md-1">
  </div>
</section>
</div> -->
<div id = "content">


<div class = "row">
<div class = "col-md-1">
</div>

<h1 style="padding: 5px; display: inline; border-radius:25px;">Solo Endeavors</h1>
<hr>
<br>
<br>
</div>

<div class="row">
  <div class = "col-md-2"></div>

  <div class="col-md-4"   onmouseover ="crystal()">
    <div class="thumbnail" id = "crystalCollector">
      <a href="https://dennismarkham.github.io/week-4-game/">
        <img style = "height: 250px" src="images/crystal.png" alt="Crystal" style="width:100%"
        data-toggle="tool-tip" title="HTML, CSS, Javascript, JQuery">
        <div class="caption">
          <p>Crystal Collector</p>
        </div>
      </a>
    </div>
  </div>

<div class="col-md-4"  onmouseover = "train()">
    <div class="thumbnail" id = "trainTimer">
      <a href="https://dennismarkham.github.io/trainTime/">
        <img  style = "height: 250px" src="images/train2.png" alt="Train" style="width:100%" data-toggle="tool-tip" title="HTML, CSS, Javascript, JQuery, Moment.js, JSON, Bootstrap">
        <div class="caption">
          <p>Train Timer</p>
        </div>
      </a>
    </div>
  </div>

  <div class = "col-md-2"></div>
</div>

<div class="row">
  <div class = "col-md-2"></div>

  <div class="col-md-4" onmouseover="boom()">
    <div class="thumbnail" id = "bombDefuser">
      <a href="https://dennismarkham.github.io/BombDefuser/">
        <img style = "height: 250px" src="images/bomb.png" alt="Bomb" style="width:100%" data-toggle="tool-tip" title="HTML, CSS, Javascript, JQuery">
        <div class="caption">
          <p>Bomb Defuser</p>
        </div>
      </a>
    </div>
  </div>

  <div class="col-md-4"  onmouseover="thunder()">
    <div class="thumbnail" id = "weatherMonitor">
      <a href="https://dennismarkham.github.io/AustinWeatherV2/">
        <img  style = "height: 250px" src="images/weather.png" alt="weather" style="width:100%" data-toggle = "tool-tip" title = "HTML, CSS, Javascript, JQuery, AJAX, Firebase">
        <div class="caption">
          <p>Austin Weather Monitor</p>
        </div>
      </a>
    </div>
  </div>


  <div class = "col-md-2"></div>
</div>

<div class="row">
  <div class = "col-md-2"></div>

  <div class="col-md-4"  onmouseover="shutter()">
    <div class="thumbnail" id = "reactGallery" >
      <a href="https://rphotogallery.herokuapp.com/">
        <img style = "height: 250px" src="images/camera.png" data-toggle="tool-tip" title = "HTML, CSS, React, Bootstrap" alt="camera" style="width:100%">
        <div class="caption">
          <p>React Photo Gallery</p>
        </div>
      </a>
    </div>
  </div>


  <div class="col-md-4" >
    <div class="thumbnail" id = "roulette">
      <a href="https://dennismarkham.github.io/Roulette/">
        <img  style = "height: 250px" src="images/wheel.png" alt="roulette wheel" style="width:100%" data-toggle="tool-tip" title = "HTML, CSS, Javascript, Javascript Animation, JQuery, Bootstrap">
        <div class="caption">
          <p>Javascript Roulette Wheel <span style = "color:red; font-style:bold;">(WIP)</span></p>
        </div>
      </a>
    </div>
  </div>

</div>

<div class = "row">
<div class = "col-md-1">
</div>
<h1 style="padding: 5px; display: inline; border-radius:25px;">Works in Progress (Solo)</h1>
<hr>
<br>
<br>
</div>

<div class="row">
  <div class = "col-md-2"></div>


   <div class="col-md-4" onmouseover="wiping()">
    <div class="thumbnail" id = "whiteboard" >
      <a href="https://dennismarkham.github.io/Angular_Whiteboard/">
        <img style = "height: 250px" src="images/whiteboard.png" alt="whiteboard" style="width:100%" data-toggle = "tool-tip" title = "HTML, CSS, Javascript, JQuery, Angular.js">
        <div class="caption">
    <p>AngularJS Whiteboard <span style = "color:red; font-style:bold;">(WIP)</span></p>
        </div>
      </a>
    </div>
  </div>




  <div class = "col-md-2"></div>
</div>


<div class = "row">
<div class = "col-md-1">
</div>
<h1 style="padding: 5px; display: inline; border-radius:25px;">Group Work</h1>
<hr>
<br>
<br>
</div>

<div class="row">
  <div class = "col-md-2"></div>


   <div class="col-md-4"  onmouseover = "typing()">
    <div class="thumbnail" id = "chatroom">
      <a href="https://cacheualcorner.herokuapp.com/">
        <img src="images/CC.png" alt="Cache-ual Corner (chat room)" style="width:100%" data-toggle= "tool-tip" title = "HTML, CSS, Javascript, JQuery, SQL, Express, Moment.JS">
        <div class="caption">
          <p>Cache-ual Corner</p>
        </div>
      </a>
    </div>
  </div>

  <div class="col-md-4">
  </div>
  <div class = "col-md-2"></div>
</div>

</div>
<script>

//on click of .thumbnail a local storage variable with the name of this.id is set to true
//first need to set the variables in local storage and make them false...right?


$(".thumbnail").click(function()
{

  console.log("function firing: setting " + this.id + " to true");

  localStorage.setItem(this.id, "true");
//set visited to true
})
//QUESTIONS:
//-Train sound and magic sound
var trainSound = new Audio("train.wav");
  trainSound.volume = 0.1;
  var crystalSound = new Audio("crystal.wav");
  crystalSound.volume = 0.25;
   var shutterSound = new Audio("shutter.wav");
   shutterSound.volume = 0.2;
  var thunderSound = new Audio("thunder.wav");
  thunderSound.volume = 0.15;
  var boomSound = new Audio("boom.mp3");
  boomSound.volume = 0.15;
  var typingSound = new Audio("typing.wav");
  typingSound.volume = 0.15;
  var wipingSound = new Audio("wiping.wav");
  wipingSound.volume = 0.5;

  function showStuff() {
    $("#content").fadeIn("slow");


    var visitedTrain = localStorage.getItem("trainTimer");

    if (visitedTrain === "true")
    {
      console.log("train timer visited");
    }
}


 function train(){
  trainSound.play();
  console.log("Playing train");
 }
 function crystal(){
  crystalSound.play();
  console.log("Playing crystal");
 }
 function shutter(){
 shutterSound.play();
 console.log("Playing shutter");
 }
 function thunder(){
  thunderSound.play();
  console.log("Playing thunder");
 }
 function boom(){
  boomSound.play();
  console.log("Playing boom");
 }
function typing(){
  typingSound.play();
  console.log("playing typing");
}
function wiping(){
  wipingSound.play();
  console.log("playing wiping");
}
</script>
</body>
</html>

【问题讨论】：

转到控制台，然后转到应用程序选项卡。从那里清除所有站点数据。如果它仍在记录，请检查您的代码。
请仅上传所需的代码。没有人会通过滚动 HTML 来找到隐藏的 JavaScript 代码。

标签： javascript html history

【解决方案1】：

localStorage 对象存储没有过期日期的数据。关闭浏览器时数据不会被删除，并且将在下一天、下一周或下一年可用。你需要像这样强行删除localStorage

    var visitedTrain = localStorage.getItem("trainTimer");

        if (visitedTrain === "true")
        {
          console.log("train timer visited");
          localStorage.removeItem('trainTimer');
        }

这段代码可以正常工作，

希望这能解决您的问题

【讨论】：

好的，但是如果我再次回到投资组合站点，不再访问火车计时器，那不会不再登录控制台吗？
如果您再次访问该站点，它将登录到您的控制台，只需在应用后检查您的结果，如果它解决了您的问题，请接受答案，谢谢
这不是我想要的，也许我会用 cookie 再试一次：/
你的问题不清楚你真正想要什么
我希望它在用户访问火车计时器后登录控制台，直到用户清除他的浏览数据。不是之前，也不是之后。

【解决方案2】：

没关系，想通了。我将“真实”更改为“已访问”。

    $(".thumbnail").click(function()
{

  console.log("function firing: setting " + this.id + " to true");

  localStorage.setItem(this.id, "visited");
//set visited to true
})

和

 var visitedTrain = localStorage.getItem("trainTimer");

    if (visitedTrain == "visited")
    {
      console.log("train timer visited");
    }

【讨论】：