页面切换时保留按钮修改状态的技术方案咨询

针对你提到的两个HTML文件跳转时按钮状态丢失的问题，以下是几种无需iframe的可行方案：

1. 使用 localStorage（本地持久化存储） #

localStorage 会将数据持久保存在浏览器中，即使关闭页面再重新打开也能保留状态。

修改后的 test.html 代码 #

<html>
    <head>
        <title>My New Page!</title>
        <style></style>
    </head>
    <body>
        <a href="test2.html" style="text-align: center;">Test 2</a>
        <button id="button">Test 1</button>
    </body>
    <script>
        const button = document.getElementById("button");
        
        // 页面加载时读取存储的状态
        const savedState = localStorage.getItem("test1ButtonState");
        if (savedState) {
            button.innerHTML = savedState;
        }
        
        button.addEventListener("click", () => {
            const newText = "Changed 1";
            button.innerHTML = newText;
            // 点击时保存状态到localStorage
            localStorage.setItem("test1ButtonState", newText);
        });
    </script>
</html>

修改后的 test2.html 代码 #

<html>
    <head>
        <title>My New Page!</title>
        <style></style>
    </head>
    <body>
        <a href="test.html" style="text-align: center;">Test 1</a>
        <button id="button">Test 2</button>
    </body>
    <script>
        const button = document.getElementById("button");
        
        // 页面加载时读取存储的状态
        const savedState = localStorage.getItem("test2ButtonState");
        if (savedState) {
            button.innerHTML = savedState;
        }
        
        button.addEventListener("click", () => {
            const newText = "Changed 2";
            button.innerHTML = newText;
            // 点击时保存状态到localStorage
            localStorage.setItem("test2ButtonState", newText);
        });
    </script>
</html>

2. 使用 sessionStorage（会话级存储） #

sessionStorage 的数据仅在当前浏览器会话中有效，关闭标签页或浏览器后数据会被清除，适合临时保存状态。

修改方式和 localStorage 几乎一致，只需将代码中的 localStorage 替换为 sessionStorage 即可。

3. 通过 URL 参数传递状态 #

跳转时将按钮状态附加到 URL 参数中，目标页面读取参数后更新按钮内容。这种方式适合临时传递状态，不会持久保存。

修改后的 test.html 代码 #

<html>
    <head>
        <title>My New Page!</title>
        <style></style>
    </head>
    <body>
        <!-- 跳转时携带当前按钮状态参数 -->
        <a id="test2Link" href="test2.html" style="text-align: center;">Test 2</a>
        <button id="button">Test 1</button>
    </body>
    <script>
        const button = document.getElementById("button");
        const test2Link = document.getElementById("test2Link");
        
        // 页面加载时读取URL参数中的状态
        const urlParams = new URLSearchParams(window.location.search);
        const savedState = urlParams.get("test1State");
        if (savedState) {
            button.innerHTML = savedState;
        }
        
        button.addEventListener("click", () => {
            const newText = "Changed 1";
            button.innerHTML = newText;
            // 更新跳转链接的参数
            test2Link.href = `test2.html?test1State=${encodeURIComponent(newText)}`;
        });
    </script>
</html>

修改后的 test2.html 代码 #

<html>
    <head>
        <title>My New Page!</title>
        <style></style>
    </head>
    <body>
        <!-- 跳转时携带当前按钮状态参数 -->
        <a id="test1Link" href="test.html" style="text-align: center;">Test 1</a>
        <button id="button">Test 2</button>
    </body>
    <script>
        const button = document.getElementById("button");
        const test1Link = document.getElementById("test1Link");
        
        // 页面加载时读取URL参数中的状态
        const urlParams = new URLSearchParams(window.location.search);
        const savedState = urlParams.get("test2State");
        if (savedState) {
            button.innerHTML = savedState;
        }
        
        button.addEventListener("click", () => {
            const newText = "Changed 2";
            button.innerHTML = newText;
            // 更新跳转链接的参数
            test1Link.href = `test.html?test2State=${encodeURIComponent(newText)}`;
        });
    </script>
</html>

4. 使用 Cookie #

Cookie 可以存储少量数据（最大4KB），并且可以设置过期时间，适合需要与后端交互的场景。

修改后的 test.html 代码示例 #

<html>
    <head>
        <title>My New Page!</title>
        <style></style>
    </head>
    <body>
        <a href="test2.html" style="text-align: center;">Test 2</a>
        <button id="button">Test 1</button>
    </body>
    <script>
        const button = document.getElementById("button");
        
        // 读取Cookie的工具函数
        function getCookie(name) {
            const value = `; ${document.cookie}`;
            const parts = value.split(`; ${name}=`);
            if (parts.length === 2) return parts.pop().split(';').shift();
        }
        
        // 设置Cookie的工具函数
        function setCookie(name, value, days = 7) {
            const date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            const expires = `expires=${date.toUTCString()}`;
            document.cookie = `${name}=${value}; ${expires}; path=/`;
        }
        
        // 页面加载时读取Cookie状态
        const savedState = getCookie("test1ButtonState");
        if (savedState) {
            button.innerHTML = savedState;
        }
        
        button.addEventListener("click", () => {
            const newText = "Changed 1";
            button.innerHTML = newText;
            // 保存状态到Cookie
            setCookie("test1ButtonState", newText);
        });
    </script>
</html>

test2.html 的修改逻辑和上述一致，只需将 test1ButtonState 替换为 test2ButtonState 即可。

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