如何通过HTML按钮修改JS变量并持久化，实现可配置家长控制网页

AI 小北

2026-7-12

可配置的家长控制网页实现方案

我正在开发一款家长控制网页，核心功能是让家长设置允许访问的网站，拦截其他未授权网站。目前的基础代码中，允许访问的网站是硬编码在if语句里的，现在需要实现：

通过HTML按钮修改允许访问的网站列表
网页关闭后重新打开，设置的允许网站能保留，无需手动修改代码

以下是我当前的代码：

<!DOCTYPE html>
<html>
    <head><title>Baboola Web</title>
    
    <style>


input{
    background-color: #1e3e5f;
    color:darkgrey;
    border-radius: 12px;
    height:40px;
    font-size:17px;
    box-shadow:inset 0 5px rgba(255,255,255,0.2), inset  2px 2px 10px 2px rgba(0,0,0,0.8), inset 0 2px rgba(255,255,255,0.1);
    border:none;
    padding-left: 5pt;
}
h1{
    color: aliceblue;
}
    </style>
    
    </head>
     <body style = "background-color:#356da6; font-family: sans-serif;">
           <h1>Baboola Web</h1>

           <form id = "form1">

             <input style = "width:1000px;" id = "url" placeholder="URL here. For allowed websites that start with http:// please type in the FULL URL, like http://www.example.com.">

           
           </form>

        <script>
            var rst = true;

            var f1 = document.getElementById("form1");
            var url = document.getElementById("url");

            f1.addEventListener("submit", function(e){

                e.preventDefault(); return false;
            })

            url.addEventListener('change', function(e){
                

                
                   var d;
                    if(url.value[0]!="h" && url.value[1]!="t" && url.value[2]!="t" && url.value[3]!="p") {
                    d = "https://www." + url.value;
                    } else{
                        d = url.value;
                    }

                    if(d !="https://www.w3schools.com" && d!= "https://www.connexus.com"&&d!="https://www.wcf.artofliving.org" && d!="https://www.zoom.us"&&d.slice(-3, -1)!='ed' && rst == true){
                        window.location.href="file:///C:/Users/mihie/OneDrive/Documents/Coding2023/rstr.htm"


                    } else{window.location.href = d}
                

            });

        </script>
     </body>
</html>

目前只能手动修改if语句里的网站列表：

if(d !="https://www.w3schools.com" && d!= "https://www.connexus.com"&&d!="https://www.wcf.artofliving.org" && d!="https://www.zoom.us"&&d.slice(-3, -1)!='ed' && rst == true)

但不想让家长做这种代码修改操作，需要更友好的配置方式。

修改后的实现方案

我们可以利用浏览器的localStorage来持久化存储允许的网站列表，同时添加一个简单的管理界面让家长添加/删除允许的网站，核心修改如下：

完整代码

<!DOCTYPE html>
<html>
<head>
    <title>Baboola Web</title>
    <style>
        input{
            background-color: #1e3e5f;
            color:darkgrey;
            border-radius: 12px;
            height:40px;
            font-size:17px;
            box-shadow:inset 0 5px rgba(255,255,255,0.2), inset  2px 2px 10px 2px rgba(0,0,0,0.8), inset 0 2px rgba(255,255,255,0.1);
            border:none;
            padding-left: 5pt;
            margin: 5px;
        }
        h1{
            color: aliceblue;
        }
        .manage-section {
            margin: 20px 0;
            padding: 10px;
            background-color: rgba(0,0,0,0.1);
            border-radius: 8px;
        }
        .manage-section button {
            background-color: #2a5a8a;
            color: aliceblue;
            border: none;
            border-radius: 8px;
            padding: 8px 16px;
            font-size: 16px;
            cursor: pointer;
        }
        .allowed-sites-list {
            color: aliceblue;
            margin-top: 10px;
        }
        .allowed-sites-list span {
            display: inline-block;
            background-color: #1e3e5f;
            padding: 4px 8px;
            border-radius: 4px;
            margin: 3px;
        }
        .remove-btn {
            background-color: #d9534f;
            margin-left: 4px;
            padding: 2px 6px;
            font-size: 12px;
        }
    </style>
</head>
<body style="background-color:#356da6; font-family: sans-serif;">
    <h1>Baboola Web</h1>

    <!-- 网址输入区域 -->
    <form id="form1">
        <input style="width:1000px;" id="url" placeholder="URL here. For allowed websites that start with http:// please type in the FULL URL, like http://www.example.com.">
    </form>

    <!-- 允许网站管理区域 -->
    <div class="manage-section">
        <h3 style="color: aliceblue;">管理允许访问的网站</h3>
        <input id="add-site-input" placeholder="输入要添加的完整URL">
        <button onclick="addAllowedSite()">添加网站</button>
        <div class="allowed-sites-list" id="allowed-sites-container">
            已允许的网站：
        </div>
    </div>

    <script>
        // 初始化允许的网站列表，从localStorage读取，没有则用默认值
        let allowedSites = JSON.parse(localStorage.getItem('allowedSites')) || [
            "https://www.w3schools.com",
            "https://www.connexus.com",
            "https://www.wcf.artofliving.org",
            "https://www.zoom.us"
        ];
        const rst = true;
        const blockUrl = "file:///C:/Users/mihie/OneDrive/Documents/Coding2023/rstr.htm";

        // 保存列表到localStorage
        function saveAllowedSites() {
            localStorage.setItem('allowedSites', JSON.stringify(allowedSites));
            renderAllowedSites();
        }

        // 渲染已允许的网站列表
        function renderAllowedSites() {
            const container = document.getElementById('allowed-sites-container');
            // 清空现有内容
            container.innerHTML = "已允许的网站：";
            allowedSites.forEach(site => {
                const siteSpan = document.createElement('span');
                siteSpan.textContent = site;
                // 添加删除按钮
                const removeBtn = document.createElement('button');
                removeBtn.textContent = "×";
                removeBtn.className = "remove-btn";
                removeBtn.onclick = () => {
                    allowedSites = allowedSites.filter(s => s !== site);
                    saveAllowedSites();
                };
                siteSpan.appendChild(removeBtn);
                container.appendChild(siteSpan);
            });
        }

        // 添加允许的网站
        function addAllowedSite() {
            const input = document.getElementById('add-site-input');
            const site = input.value.trim();
            if (site && !allowedSites.includes(site)) {
                allowedSites.push(site);
                saveAllowedSites();
                input.value = "";
            }
        }

        // 网址输入处理逻辑
        const f1 = document.getElementById("form1");
        const urlInput = document.getElementById("url");

        f1.addEventListener("submit", function(e){
            e.preventDefault();
        });

        urlInput.addEventListener('change', function(e){
            let d;
            // 处理URL补全逻辑
            if (!urlInput.value.startsWith('http')) {
                d = "https://www." + urlInput.value;
            } else {
                d = urlInput.value;
            }

            // 检查是否在允许列表或符合特殊规则
            const isAllowed = allowedSites.includes(d) || d.slice(-3, -1) === 'ed';
            if (!isAllowed && rst) {
                window.location.href = blockUrl;
            } else {
                window.location.href = d;
            }
        });

        // 页面加载时渲染允许的网站列表
        renderAllowedSites();
    </script>
</body>
</html>

关键修改说明

持久化存储：使用localStorage存储允许的网站列表，页面刷新或重新打开时会自动读取之前的设置。
管理界面：添加了专门的区域让家长输入并添加允许的网站，同时显示已添加的网站并支持删除操作。
逻辑优化：把硬编码的网站列表替换成数组allowedSites，用includes()方法判断是否允许访问，代码更简洁易维护。
渲染列表：实现了renderAllowedSites函数动态展示已允许的网站，让家长直观看到当前配置。

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

如何通过HTML按钮修改JS变量并持久化，实现可配置家长控制网页

修改后的实现方案 #

完整代码 #

关键修改说明 #

修改后的实现方案

完整代码

关键修改说明