问候堆栈溢出的居民。我有个问题。我正在尝试对我的投资组合中的内容进行编程，每次我访问我的一个项目时，当用户返回时，“您访问过X”都会登录到控制台。为了证明概念，我在名为“火车计时器”的项目中尝试了此操作。但是，它说在控制台中，即使我没有，我也曾经拜访过火车计时器。即使清除所有浏览数据/历史记录/所有内容，也会发生这种情况。这是怎么回事？这是我的代码。
<!DOCTYPE html>
<html lang ="en-us">
<head>
<meta charset="UTF-8">
<title>Portfolio</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
#content {
display: none;
}
.thumbnail:hover {
border-style: solid;
border-width: 3px;
border-color:#E67F18;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body onload="showStuff()">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">Dennis Markham</a>
</div>
<ul class="nav navbar-nav">
<li><a href="index.html">About Me</a></li>
<li class = "active"><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
<!-- <div class ="container">
<section class ="row">
<div class ="col-md-1">
</div>
<div class="col-md-10">
<a href = "https://dennismarkham.github.io/trainTime/"> <img class = "portfolio" src = "images/dummy_image.png" alt ="train simulator"><span class = "caption">Train Timer </span></img></a>
<a href = "https://dennismarkham.github.io/week-4-game/"><img class = "portfolio" src = "images/dummy_image.png" alt ="crystal collector"></img></a>
<a href = "#"><img class = "portfolio" src = "images/dummy_image.png" alt ="coming soon..."></img></a>
</div>
<div class = "col-md-1">
</div>
</section>
</div> -->
<div id = "content">
<div class = "row">
<div class = "col-md-1">
</div>
<h1 style="padding: 5px; display: inline; border-radius:25px;">Solo Endeavors</h1>
<hr>
<br>
<br>
</div>
<div class="row">
<div class = "col-md-2"></div>
<div class="col-md-4" onmouseover ="crystal()">
<div class="thumbnail" id = "crystalCollector">
<a href="https://dennismarkham.github.io/week-4-game/">
<img style = "height: 250px" src="images/crystal.png" alt="Crystal" style="width:100%"
data-toggle="tool-tip" title="HTML, CSS, Javascript, JQuery">
<div class="caption">
<p>Crystal Collector</p>
</div>
</a>
</div>
</div>
<div class="col-md-4" onmouseover = "train()">
<div class="thumbnail" id = "trainTimer">
<a href="https://dennismarkham.github.io/trainTime/">
<img style = "height: 250px" src="images/train2.png" alt="Train" style="width:100%" data-toggle="tool-tip" title="HTML, CSS, Javascript, JQuery, Moment.js, JSON, Bootstrap">
<div class="caption">
<p>Train Timer</p>
</div>
</a>
</div>
</div>
<div class = "col-md-2"></div>
</div>
<div class="row">
<div class = "col-md-2"></div>
<div class="col-md-4" onmouseover="boom()">
<div class="thumbnail" id = "bombDefuser">
<a href="https://dennismarkham.github.io/BombDefuser/">
<img style = "height: 250px" src="images/bomb.png" alt="Bomb" style="width:100%" data-toggle="tool-tip" title="HTML, CSS, Javascript, JQuery">
<div class="caption">
<p>Bomb Defuser</p>
</div>
</a>
</div>
</div>
<div class="col-md-4" onmouseover="thunder()">
<div class="thumbnail" id = "weatherMonitor">
<a href="https://dennismarkham.github.io/AustinWeatherV2/">
<img style = "height: 250px" src="images/weather.png" alt="weather" style="width:100%" data-toggle = "tool-tip" title = "HTML, CSS, Javascript, JQuery, AJAX, Firebase">
<div class="caption">
<p>Austin Weather Monitor</p>
</div>
</a>
</div>
</div>
<div class = "col-md-2"></div>
</div>
<div class="row">
<div class = "col-md-2"></div>
<div class="col-md-4" onmouseover="shutter()">
<div class="thumbnail" id = "reactGallery" >
<a href="https://rphotogallery.herokuapp.com/">
<img style = "height: 250px" src="images/camera.png" data-toggle="tool-tip" title = "HTML, CSS, React, Bootstrap" alt="camera" style="width:100%">
<div class="caption">
<p>React Photo Gallery</p>
</div>
</a>
</div>
</div>
<div class="col-md-4" >
<div class="thumbnail" id = "roulette">
<a href="https://dennismarkham.github.io/Roulette/">
<img style = "height: 250px" src="images/wheel.png" alt="roulette wheel" style="width:100%" data-toggle="tool-tip" title = "HTML, CSS, Javascript, Javascript Animation, JQuery, Bootstrap">
<div class="caption">
<p>Javascript Roulette Wheel <span style = "color:red; font-style:bold;">(WIP)</span></p>
</div>
</a>
</div>
</div>
</div>
<div class = "row">
<div class = "col-md-1">
</div>
<h1 style="padding: 5px; display: inline; border-radius:25px;">Works in Progress (Solo)</h1>
<hr>
<br>
<br>
</div>
<div class="row">
<div class = "col-md-2"></div>
<div class="col-md-4" onmouseover="wiping()">
<div class="thumbnail" id = "whiteboard" >
<a href="https://dennismarkham.github.io/Angular_Whiteboard/">
<img style = "height: 250px" src="images/whiteboard.png" alt="whiteboard" style="width:100%" data-toggle = "tool-tip" title = "HTML, CSS, Javascript, JQuery, Angular.js">
<div class="caption">
<p>AngularJS Whiteboard <span style = "color:red; font-style:bold;">(WIP)</span></p>
</div>
</a>
</div>
</div>
<div class = "col-md-2"></div>
</div>
<div class = "row">
<div class = "col-md-1">
</div>
<h1 style="padding: 5px; display: inline; border-radius:25px;">Group Work</h1>
<hr>
<br>
<br>
</div>
<div class="row">
<div class = "col-md-2"></div>
<div class="col-md-4" onmouseover = "typing()">
<div class="thumbnail" id = "chatroom">
<a href="https://cacheualcorner.herokuapp.com/">
<img src="images/CC.png" alt="Cache-ual Corner (chat room)" style="width:100%" data-toggle= "tool-tip" title = "HTML, CSS, Javascript, JQuery, SQL, Express, Moment.JS">
<div class="caption">
<p>Cache-ual Corner</p>
</div>
</a>
</div>
</div>
<div class="col-md-4">
</div>
<div class = "col-md-2"></div>
</div>
</div>
<script>
//on click of .thumbnail a local storage variable with the name of this.id is set to true
//first need to set the variables in local storage and make them false...right?
$(".thumbnail").click(function()
{
console.log("function firing: setting " + this.id + " to true");
localStorage.setItem(this.id, "true");
//set visited to true
})
//QUESTIONS:
//-Train sound and magic sound
var trainSound = new Audio("train.wav");
trainSound.volume = 0.1;
var crystalSound = new Audio("crystal.wav");
crystalSound.volume = 0.25;
var shutterSound = new Audio("shutter.wav");
shutterSound.volume = 0.2;
var thunderSound = new Audio("thunder.wav");
thunderSound.volume = 0.15;
var boomSound = new Audio("boom.mp3");
boomSound.volume = 0.15;
var typingSound = new Audio("typing.wav");
typingSound.volume = 0.15;
var wipingSound = new Audio("wiping.wav");
wipingSound.volume = 0.5;
function showStuff() {
$("#content").fadeIn("slow");
var visitedTrain = localStorage.getItem("trainTimer");
if (visitedTrain === "true")
{
console.log("train timer visited");
}
}
function train(){
trainSound.play();
console.log("Playing train");
}
function crystal(){
crystalSound.play();
console.log("Playing crystal");
}
function shutter(){
shutterSound.play();
console.log("Playing shutter");
}
function thunder(){
thunderSound.play();
console.log("Playing thunder");
}
function boom(){
boomSound.play();
console.log("Playing boom");
}
function typing(){
typingSound.play();
console.log("playing typing");
}
function wiping(){
wipingSound.play();
console.log("playing wiping");
}
</script>
</body>
</html>
答案 0 :(得分：0)
localStorage对象存储没有到期日期的数据。当浏览器关闭时，数据不会被删除，并且在第二天，每周或每年都可用。 您需要像这样
强行删除localStorage var visitedTrain = localStorage.getItem("trainTimer");
if (visitedTrain === "true")
{
console.log("train timer visited");
localStorage.removeItem('trainTimer');
}
此代码可以正常工作
希望这可以解决您的问题
答案 1 :(得分：0)
没关系，想通了。我将“ true”更改为“ visited”。
$(".thumbnail").click(function()
{
console.log("function firing: setting " + this.id + " to true");
localStorage.setItem(this.id, "visited");
//set visited to true
})
和
var visitedTrain = localStorage.getItem("trainTimer");
if (visitedTrain == "visited")
{
console.log("train timer visited");
}