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

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>

asked Nov 24 '18 at 4:31

DennisM

407

add a comment |

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>

asked Nov 24 '18 at 4:31

DennisM

407

add a comment |

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>

asked Nov 24 '18 at 4:31

DennisM

407

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>

javascript jquery html local-storage persistent

asked Nov 24 '18 at 4:31

DennisM

407

asked Nov 24 '18 at 4:31

DennisM

407

asked Nov 24 '18 at 4:31

DennisM

407

asked Nov 24 '18 at 4:31

DennisM

407

asked Nov 24 '18 at 4:31

DennisM

407

add a comment |

1 Answer
1

active

oldest

votes

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 4:48

answered Nov 24 '18 at 4:41

Nick Parsons

4,8622721

Thanks, but now it continues to say "train timer visited" even after I clear my history.

– DennisM
Nov 24 '18 at 5:43

@DennisM You need to “clear browsing data” see this 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 5:55

That's what I meant.

– DennisM
Nov 24 '18 at 6:16

@DennisM ok, so does this solve your question?

– Nick Parsons
Nov 24 '18 at 6:27

No, it does not.

– DennisM
Nov 24 '18 at 21:11

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53455142%2ftrying-to-use-local-storage-to-track-is-user-has-visited-page-not-working%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

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 4:48

answered Nov 24 '18 at 4:41

Nick Parsons

4,8622721

Thanks, but now it continues to say "train timer visited" even after I clear my history.

– DennisM
Nov 24 '18 at 5:43

@DennisM You need to “clear browsing data” see this 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 5:55

That's what I meant.

– DennisM
Nov 24 '18 at 6:16

@DennisM ok, so does this solve your question?

– Nick Parsons
Nov 24 '18 at 6:27

No, it does not.

– DennisM
Nov 24 '18 at 21:11

add a comment |

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 4:48

answered Nov 24 '18 at 4:41

Nick Parsons

4,8622721

Thanks, but now it continues to say "train timer visited" even after I clear my history.

– DennisM
Nov 24 '18 at 5:43

@DennisM You need to “clear browsing data” see this 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 5:55

That's what I meant.

– DennisM
Nov 24 '18 at 6:16

@DennisM ok, so does this solve your question?

– Nick Parsons
Nov 24 '18 at 6:27

No, it does not.

– DennisM
Nov 24 '18 at 21:11

add a comment |

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 4:48

answered Nov 24 '18 at 4:41

Nick Parsons

4,8622721

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 4:48

answered Nov 24 '18 at 4:41

Nick Parsons

4,8622721

edited Nov 24 '18 at 4:48

answered Nov 24 '18 at 4:41

Nick Parsons

4,8622721

answered Nov 24 '18 at 4:41

Nick Parsons

4,8622721

answered Nov 24 '18 at 4:41

Nick Parsons

4,8622721

Thanks, but now it continues to say "train timer visited" even after I clear my history.

– DennisM
Nov 24 '18 at 5:43

@DennisM You need to “clear browsing data” see this 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 5:55

That's what I meant.

– DennisM
Nov 24 '18 at 6:16

@DennisM ok, so does this solve your question?

– Nick Parsons
Nov 24 '18 at 6:27

No, it does not.

– DennisM
Nov 24 '18 at 21:11

add a comment |

Thanks, but now it continues to say "train timer visited" even after I clear my history.

– DennisM
Nov 24 '18 at 5:43

@DennisM You need to “clear browsing data” see this 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 5:55

That's what I meant.

– DennisM
Nov 24 '18 at 6:16

@DennisM ok, so does this solve your question?

– Nick Parsons
Nov 24 '18 at 6:27

No, it does not.

– DennisM
Nov 24 '18 at 21:11

Thanks, but now it continues to say "train timer visited" even after I clear my history.

– DennisM
Nov 24 '18 at 5:43

@DennisM You need to “clear browsing data” see this 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 5:55

That's what I meant.

– DennisM
Nov 24 '18 at 6:16

@DennisM ok, so does this solve your question?

– Nick Parsons
Nov 24 '18 at 6:27

No, it does not.

– DennisM
Nov 24 '18 at 21:11

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Btukfyl