Trying to use local storage to track is user has visited page, not working

Question

Greetings denizens of StackOverflow. I'm trying to do a simple trick using local storage on my portfolio. When the user visits one of my projects, it sets a variable in local storage so that when the user comes back, the console will say "train timer visited" in the console.

This doesn't work. The first function fires, but upon return it does not say I have visited the respect project in the console. What is going on?

Here are the two most important functions:

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

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

And:

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

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

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

Here is the entirety of my code:

<!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>

Nick Parsons · Answer 1 · 2018-11-24T04:48:34.297

2

Depending on what browser you're using, local storage will most of the time store your values as strings, in this case, chrome and firefox will store your boolean as a string, thus, you need to check the string version of true ('true'), not the boolean version (true)

function showStuff() {
  $("#content").fadeIn("slow");
  var visitedTrain = localStorage.getItem("trainTimer");

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

edited Nov 24 '18 at 04:48

answered Nov 24 '18 at 04:41

Nick Parsons

45,728
6
46
64

Thanks, but now it continues to say "train timer visited" even after I clear my history. – DennisM Nov 24 '18 at 05:43
@DennisM You need to “clear browsing data” see [this](https://stackoverflow.com/a/37105645/5648954) answer, or if you want to remove the storage key manually using code you can use `localStorage.removeItem(“trainTimer”)` – Nick Parsons Nov 24 '18 at 05:55
That's what I meant. – DennisM Nov 24 '18 at 06:16
No, it does not. – DennisM Nov 24 '18 at 21:11

Trying to use local storage to track is user has visited page, not working

1 Answers1