使用 JavaScript 操作页面答案

【问题标题】：Pages manipulation with JavaScript使用 JavaScript 操作页面
【发布时间】：2018-05-21 09:37:38
【问题描述】：

我正在建立一个网站，其中添加了更改主题的功能。但是，问题是我的网站中有很多页面，当我转到下一页时，它会重置默认值。我只想选择一次主题，然后将其保留在我的整个网站中。

【问题讨论】：

将用户偏好保存在本地存储中并从那里读取。
这里有一个link to localStorage 可以帮助您入门
建议我提供一个最小、完整且可验证的代码示例，以帮助其他人检测可能的错误或提出新的解决方案。

标签： javascript html css navigation

【解决方案1】：

您可以使用localStorage 来持久化数据。它可以从您网站的每个页面访问。

这是一个简单的例子，我建议你对localStorage做更多的研究，比如如何确定是否有足够的空间来存储数据。并做一些检查以确定您要查找的数据是否存在。

来源：https://snippets.cacher.io/snippet/fdc6f8a598f1395092e7

示例：

第 1 页：

<!doctype html>
<html lang="en-us">
    <head>
    </head>
    <body>
        <p id="paragraph">Hello</p>
        <p id="loadedText"></p>
        <button onclick="load();">Load</button>
        <button onclick="save();">Save</button>
        <a href="two.html">Next page</a>
        <script>
            function load() {
                var element = document.getElementById("loadedText");
                element.innerHTML = localStorage.getItem("text");
            }

            function save() {
                var text = document.getElementById("paragraph").innerHTML;
                localStorage.setItem("text", text);
            }
        </script>
    </body>
</html>

第 2 页：

<!doctype html>
<html lang="en-us">
    <head>
    </head>
    <body>
        <p id="loadedText"></p>
        <a href="one.html">Previous page</a>
        <script>
            var element = document.getElementById("loadedText");
            var text = localStorage.getItem("text");
            element.innerHTML = text;
        </script>
    </body>
</html>

【讨论】：