Javascript 如何防止重新加载撤消.innerHTML操作？_Javascript

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

javascript

Javascript 如何防止重新加载撤消.innerHTML操作？,javascript,Javascript,我已经为学校的编码俱乐部建立了一个简单的网站，除了索引页面上的一小段javascript之外，它运行良好。这个javascript只是一个简单的随机化工具，用于确定下周谁会带来零食。但是，在程序运行后，如果重新加载名称而不保存，则会弹出名称。我已经尝试将它保存到localStorage并访问它，但没有帮助。谢谢 <!doctype html> <html> <head> <title>Coding Club</title> &l

我已经为学校的编码俱乐部建立了一个简单的网站，除了索引页面上的一小段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>


编码俱乐部






编码俱乐部
欢迎
欢迎访问传统编码俱乐部网站。在这里，您可以找到有关您可以保留的程序、有用的下载、网站和喜爱的零食的信息
下周的零食供应者是：
随机化！
变量名称=[“迪伦”、“大卫”、“斯巴什”、“阿纳亚”、“安娜”、“阿努沙”、“布兰登”、“贾斯汀”、“娜塔莎和尼尔”、“里沙布”、“香农”、“沃莱克女士”]；
函数start（）{
var n=名称[Math.floor（Math.random（）*12）]；
如果（n==“娜塔莎和尼尔”）{
document.getElementById（“零食”）.innerHTML=“下周的零食供应商是：娜塔莎和尼尔”；
}否则{
document.getElementById（“零食”）.innerHTML=“下周的零食带来者是：”+n；
}}

您可以使用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);
  }
}

解决办法是：

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


编码俱乐部






编码俱乐部
欢迎
欢迎访问传统编码俱乐部网站。在这里，您可以找到有关您可以保留的程序、有用的下载、网站和喜爱的零食的信息
下周的零食供应者是：
随机化！
变量名称=[“迪伦”、“大卫”、“斯巴什”、“阿纳亚”、“安娜”、“阿努沙”、“布兰登”、“贾斯汀”、“娜塔莎和尼尔”、“里沙布”、“香农”、“沃莱克女士”]；
函数start（）{
var n=名称[Math.floor（Math.random（）*12）]；
localStorage.name=n；
如果（n==“娜塔莎和尼尔”）{
document.getElementById（“零食”）.innerHTML=“下周的零食供应商是：娜塔莎和尼尔”；
}否则{
document.getElementById（“零食”）.innerHTML=“下周的零食带来者是：”+n；
}}
if（类型（存储）！=“未定义”）{
n=localStorage.name；
如果（n==“娜塔莎和尼尔”）{
document.getElementById（“零食”）.innerHTML=“下周的零食供应商是：娜塔莎和尼尔”；
}否则{
document.getElementById（“零食”）.innerHTML=“下周的零食带来者是：”+n；
}
}否则{
//抱歉！不支持Web存储。。
}

您要做的是在单击按钮时保存名称，当页面重新加载时，执行start函数中的所有代码，以便用姓氏更新文本

请注意，很抱歉缩进，但我正在使用手机

您想在有限的时间内保存它吗？我想保存它，直到再次单击按钮。我认为本地存储非常适合此目的。这是我的想法，但重新加载后，网站没有更新，但保持空白。它保存并从本地存储中提取，但从未更新页面。您将从存储中提取并更新页面的代码放在哪里？