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












0















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>





javascript jquery html local-storage persistent







share|improve this question



























    0















    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>





    javascript jquery html local-storage persistent







    share|improve this question

























      0












      0








      0








      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>





      javascript jquery html local-storage persistent







      share|improve this 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>





      javascript jquery html local-storage persistent




      javascript jquery html local-storage persistent






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 24 '18 at 4:31









      DennisMDennisM

      407




      407
























          1 Answer
          1






          active

          oldest

          votes


















          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");
          
  }
          
}





          share|improve this answer


























          • 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











          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


















          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















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          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");
          
  }
          
}





          share|improve this answer


























          • 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
















          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");
          
  }
          
}





          share|improve this answer


























          • 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














          2












          2








          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");
          
  }
          
}





          share|improve this answer















          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");
          
  }
          
}






          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Nov 24 '18 at 4:48

























          answered Nov 24 '18 at 4:41









          Nick ParsonsNick Parsons

          5,4762722




          5,4762722













          • 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

















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

          – DennisM
          Nov 24 '18 at 5:43





          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





          @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





          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





          @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





          No, it does not.

          – DennisM
          Nov 24 '18 at 21:11


















          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














          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















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          -

          Popular posts from this blog

          Berounka

          Image
          Berounka.mw-parser-output .entete.map{background-image:url("//upload.wikimedia.org/wikipedia/commons/7/7a/Picto_infobox_map.png")} Caractéristiques Longueur 139  km Bassin 8 861  km 2 Bassin collecteur Elbe Débit moyen ? Cours Source Confluence de la Mže et de la Radbuza · Localisation Pilsen · Altitude 305  m · Coordonnées 49° 45′ 13″ N, 13° 23′ 24″ E Confluence Vltava · Localisation Prague · Altitude 187  m · Coordonnées 49° 59′ 43″ N, 14° 24′ 04″ E Géographie Pays traversés   République tchèque modifier   La Berounka est une rivière de la République tchèque. Elle porte le nom de Mže depuis sa source en Allemagne près de la frontière jusqu'à sa confluence avec la Radbuza à Plzeň. Elle continue ensuite sous le nom de Berounka jusqu'à sa confluence avec la Vltava, près de Prague. La rivière est une destination prisée pour les amateurs de canoë, qui appréc
          Read more

          Fiat S.p.A.

          Image
          Cet article court présente un sujet plus développé dans : Fiat et Fiat Chrysler Automobiles. Fiat S.p.A. Fiat S.p.A. ( Fabbrica Italiana Automobili Torino , acronyme FIAT) est un groupe, notamment connu comme société-mère du constructeur automobile italien, Fiat. Portail des entreprises Portail de Turin Portail de l’automobile This page is only for reference, If you need detailed information, please check here
          Read more

          Type 'String' is not a subtype of type 'int' of 'index'

          Image
          up vote 0 down vote favorite My App can authenticate successfully when debugging against the Android emulator, but if I try to authenticate using debugging against the physical device (with same OS version), an error message appears after more than one minute waiting: Exception has occurred. _TypeError (type 'String' is not a subtype of type 'int' of 'index') The error message points to the following code: if (responseJson[AuthUtils.authTokenKey] != null) { AuthUtils.insertDetails( userNameController.text, passwordController.text, responseJson); ... } else { ... }; And in the DEBUG CONSOLE I get the following: I/flutter ( 9531): Auth: SocketException: OS Error: Connection timed out, errno = 110, address = example.com, port = 3897
          Read more