如何避免页面重载后innerHTML修改的内容被还原？

嘿，我明白你的问题了——每次刷新页面后，之前随机选中的零食带路人就不见了，对吧？你想用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>
    <script>
        var names = ["Dylan", "David", "Sparsh", "Ananya", "Anna", "Anusha", "Brandon", "Justin", "Natasha and Neil", "Rishab", "Shannon", "Ms. Wolek"];

        // 页面加载时读取localStorage里保存的结果
        window.onload = function() {
            const savedBringer = localStorage.getItem('snackBringer');
            if (savedBringer) {
                updateSnackTitle(savedBringer);
            }
        };

        function start() {
            var n = names[Math.floor(Math.random() * names.length)]; // 用names.length代替硬写的12，列表增减时更灵活
            updateSnackTitle(n);
            // 把选中的名字存入localStorage
            localStorage.setItem('snackBringer', n);
        }

        // 抽离更新标题的逻辑，避免重复代码
        function updateSnackTitle(name) {
            if(name === "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: " + name;
            }
        }
    </script>
</body>
</html>

关键修改点说明 #

• 页面加载时读取数据：通过window.onload事件，在页面加载完成后检查localStorage里有没有保存的零食带路人名字，如果有就直接更新页面标题。
• 随机生成后存储数据：在start()函数里，生成随机名字后，用localStorage.setItem()把名字存到浏览器本地存储中。
• 抽离重复逻辑：把更新标题的代码单独做成updateSnackTitle()函数，不管是页面加载读取还是点击按钮生成，都调用这个函数，减少代码重复。
• 优化随机索引：用names.length代替硬写的12，以后如果名字列表有增减，代码不用手动改数字，更灵活。

这样修改后，下次刷新页面时，之前选中的名字就会自动显示出来啦！

内容的提问来源于stack exchange，提问作者thedb48