无用户账户时如何保存网站Checklist进度？

我来帮你搞定这个简易Checklist工具，完全贴合你的需求——不用注册账户、访客能本地保存进度、支持隐藏自选条目、标记完成状态，界面清爽还能直接打印。下面是完整的可运行代码，每部分我都做了详细说明：

HTML 结构 #

先搭好基础的页面框架，包含预定义的清单条目，每个条目配有完成复选框、内容显示区和隐藏按钮：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易进度清单</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>我的进度清单</h1>
        <div class="controls">
            <button id="printBtn">打印清单</button>
        </div>
        <ul id="checklist">
            <!-- 预定义条目 -->
            <li data-id="item1">
                <input type="checkbox" class="complete-checkbox">
                <span class="item-content">完成网站首页原型设计</span>
                <button class="hide-btn">×</button>
            </li>
            <li data-id="item2">
                <input type="checkbox" class="complete-checkbox">
                <span class="item-content">编写产品功能文档</span>
                <button class="hide-btn">×</button>
            </li>
            <li data-id="item3">
                <input type="checkbox" class="complete-checkbox">
                <span class="item-content">完成移动端适配测试</span>
                <button class="hide-btn">×</button>
            </li>
            <li data-id="item4">
                <input type="checkbox" class="complete-checkbox">
                <span class="item-content">对接第三方支付接口</span>
                <button class="hide-btn">×</button>
            </li>
        </ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS 样式 #

做一个简洁美观的界面，同时专门适配打印场景（打印时隐藏操作按钮，只显示清单内容）：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
}

.container {
    max-width: 800px;
    margin: 30px auto;
    padding: 0 20px;
}

h1 {
    text-align: center;
    color: #2c3e50;
    margin-bottom: 20px;
}

.controls {
    text-align: right;
    margin-bottom: 15px;
}

#printBtn {
    padding: 8px 16px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

#printBtn:hover {
    background-color: #2980b9;
}

#checklist {
    list-style: none;
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

#checklist li {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    margin-bottom: 10px;
    background-color: white;
    border-radius: 6px;
    transition: all 0.3s ease;
}

#checklist li:last-child {
    margin-bottom: 0;
}

.complete-checkbox {
    width: 18px;
    height: 18px;
    margin-right: 12px;
    cursor: pointer;
}

.item-content {
    flex: 1;
    font-size: 16px;
    color: #333;
}

.completed .item-content {
    text-decoration: line-through;
    color: #7f8c8d;
}

.hide-btn {
    background-color: #e74c3c;
    color: white;
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 2px;
}

.hide-btn:hover {
    background-color: #c0392b;
}

/* 打印样式适配 */
@media print {
    .controls, .hide-btn {
        display: none !important;
    }

    #checklist {
        box-shadow: none;
        padding: 0;
        background-color: transparent;
    }

    #checklist li {
        box-shadow: none;
        border-bottom: 1px solid #eee;
        border-radius: 0;
    }
}

JavaScript 逻辑 #

实现核心功能：本地进度保存/加载、完成状态切换、隐藏条目、打印触发：

// 存储键名，用于localStorage
const STORAGE_KEY = 'checklist_progress';

// 初始化清单
function initChecklist() {
    // 从本地存储加载进度
    const savedProgress = localStorage.getItem(STORAGE_KEY);
    if (savedProgress) {
        const progress = JSON.parse(savedProgress);
        const checklistItems = document.querySelectorAll('#checklist li');
        
        checklistItems.forEach(item => {
            const itemId = item.dataset.id;
            if (progress[itemId]) {
                // 设置完成状态
                if (progress[itemId].completed) {
                    item.querySelector('.complete-checkbox').checked = true;
                    item.classList.add('completed');
                }
                // 设置隐藏状态
                if (progress[itemId].hidden) {
                    item.style.display = 'none';
                }
            }
        });
    }
}

// 保存进度到本地存储
function saveProgress() {
    const progress = {};
    const checklistItems = document.querySelectorAll('#checklist li');
    
    checklistItems.forEach(item => {
        const itemId = item.dataset.id;
        progress[itemId] = {
            completed: item.querySelector('.complete-checkbox').checked,
            hidden: item.style.display === 'none'
        };
    });
    
    localStorage.setItem(STORAGE_KEY, JSON.stringify(progress));
}

// 绑定事件
function bindEvents() {
    // 完成状态切换事件
    document.querySelectorAll('.complete-checkbox').forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            const listItem = this.closest('li');
            listItem.classList.toggle('completed', this.checked);
            saveProgress();
        });
    });
    
    // 隐藏条目事件
    document.querySelectorAll('.hide-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const listItem = this.closest('li');
            listItem.style.display = listItem.style.display === 'none' ? 'flex' : 'none';
            saveProgress();
        });
    });
    
    // 打印按钮事件
    document.getElementById('printBtn').addEventListener('click', function() {
        window.print();
    });
}

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', () => {
    initChecklist();
    bindEvents();
});

功能说明 #

• 无需注册本地保存：用浏览器的localStorage存储每个访客的进度，数据存在用户本地浏览器中，无需后端服务或账户。
• 隐藏/忽略条目：点击每个条目右侧的红色叉号按钮，即可隐藏/显示该条目，状态自动保存。
• 标记完成状态：勾选复选框即可标记条目完成，完成的条目会显示删除线，状态自动保存。
• 打印支持：点击打印按钮，会自动适配打印样式，隐藏操作按钮，只显示清单内容和完成状态。
• 美观界面：采用卡片式设计，带阴影和过渡效果，移动端也能自适应显示。

你可以直接把这三部分代码分别保存为index.html、styles.css、script.js，放在同一个目录下打开就能使用啦～

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