Question

我为我学校的编码俱乐部创建了一个简单的网站，除了索引页面上的一小段javascript外，它的工作正常。这个javascript只是一个简单的小随机发生器，为谁在下周带来零食。但是，程序运行后，如果重新加载名称，则会弹出名称并不保存。我已经尝试将其保存到localStorage并访问它但它没有帮助。谢谢！

<!doctype html>
<html>
<head>
  <title>Coding Club</title>
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
</head>
<body>
<ul>
  <li><a class="active" href="index.html">Home</a></li>
  <li><a href="downloads.html">Downloads</a></li>
  <li><a href="websites.html">Websites</a></li>
  <li><a href="snackslist.html">Snacks</a></li>
</ul>
  <h1>Coding Club</h1>
  <h2>Welcome!</h2>
  <p>Welcome to the Heritage Coding Club website. Here you can find information about programs that you can keep, useful downloads, websites, and favorite snacks!</p>
  <h2 id="snack">Next Week's Snack Bringer is:</h2>
<div id="random">
  <button onclick="start()">Randomize!</button>
</div>
</body>
<script>
var names = ["Dylan", "David", "Sparsh", "Ananya", "Anna", "Anusha", "Brandon", "Justin", "Natasha and Neil", "Rishab", "Shannon", "Ms. Wolek"];
function start() {
  var n = names[Math.floor(Math.random() * 12)];
  if(n == "Natasha and Neil") {
  document.getElementById("snack").innerHTML = "Next Week's Snack Bringers are: Natasha and Neil";
}else{
  document.getElementById("snack").innerHTML = "Next Week's Snack Bringer is: " + n;
}}
</script>
</html>

Answer 1

您可以使用localStorage对象，如下所示：

var names = ["Dylan", "David", "Sparsh", "Ananya", "Anna", "Anusha", "Brandon", "Justin", "Natasha and Neil", "Rishab", "Shannon", "Ms. Wolek"];

// The randomize button click event used to be start()
function randomize(){
  var n = names[Math.floor(Math.random() * 12)];
  setName(n);

}

function setName(n)
{ 
  // Simple Method to add the name to the element
  if (n == "Natasha and Neil") {
    document.getElementById("snack").innerHTML = "Next Week's Snack Bringers are: Natasha and Neil";
  } else {
    document.getElementById("snack").innerHTML = "Next Week's Snack Bringer is: " + n;
  }
  save(n);
}

function save(n)
{
  // Saving to the storage
  localStorage.setItem('name', n);
}

// For When the page loads
window.onload = function(){

  // If there is something in the storage we gonna get it else we do nothing.
  var n = localStorage.getItem('name');
  if (n) 
  {
    setName(n);
  }
}

Answer 2

解决方案是：

<!doctype html>
<html>
<head>
  <title>Coding Club</title>
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
</head>
<body>
<ul>
  <li><a class="active" href="index.html">Home</a></li>
  <li><a href="downloads.html">Downloads</a></li>
  <li><a href="websites.html">Websites</a></li>
  <li><a href="snackslist.html">Snacks</a></li>
</ul>
  <h1>Coding Club</h1>
  <h2>Welcome!</h2>
  <p>Welcome to the Heritage Coding Club website. Here you can find information about programs that you can keep, useful downloads, websites, and favorite snacks!</p>
  <h2 id="snack">Next Week's Snack Bringer is:</h2>
<div id="random">
  <button onclick="start()">Randomize!</button>
</div>
</body>
<script>
var names = ["Dylan", "David", "Sparsh", "Ananya", "Anna", "Anusha", "Brandon", "Justin", "Natasha and Neil", "Rishab", "Shannon", "Ms. Wolek"];
function start() {
  var n = names[Math.floor(Math.random() * 12)];
localStorage.name=n;
  if(n == "Natasha and Neil") {
  document.getElementById("snack").innerHTML = "Next Week's Snack Bringers are: Natasha and Neil";
}else{
  document.getElementById("snack").innerHTML = "Next Week's Snack Bringer is: " + n;
}}

if (typeof(Storage) !== "undefined") {
n=localStorage.name;
    if(n == "Natasha and Neil") {
  document.getElementById("snack").innerHTML = "Next Week's Snack Bringers are: Natasha and Neil";
}else{
  document.getElementById("snack").innerHTML = "Next Week's Snack Bringer is: " + n;
}
} else {
    // Sorry! No Web Storage support..
}
</script>
</html>

当您单击按钮时，您执行的操作是保存名称，当页面重新加载启动函数之外的所有代码时，将使用姓氏更新文本

P.S。对不起缩进但我正在使用手机

如何防止重新加载撤消我的.innerHTML操作？

2 个答案: