单位要求搞一个简单的导航页面，实现可以分类导航需要的页面，下载需要的软件等，特点就突出一个简单 好维护，走纯内网运行，稳准快，效果刚刚滴，分享给有需要的小伙伴。

实现功能如下：

1. 前台页面功能：

• 响应式布局
• 网址分类展示
• 实时搜索功能
• 新标签页打开链接

2. 后台管理功能：

• 添加新链接（自动创建分类）
• 删除现有链接
• 数据持久化（使用localStorage存储）
• 简单的表单验证

3. 数据存储：

• 使用浏览器localStorage存储数据
• 数据结构包含分类和链接的层级关系

代码如下：

    
    
    


    

        
    
    
    

        // 前台显示后台管理 
    

        管理后台
    

    <script>
        // 从localStorage加载数据
        let navData = JSON.parse(localStorage.getItem('navData')) || {
            categories: [
                {
                    name: '前端开发',
                    links: [
                        { name: 'MDN', url: 'https://developer.mozilla.org' },
                        { name: 'GitHub', url: 'https://github.com' }
                    ]
                },
                {
                    name: '设计素材',
                    links: [
                        { name: 'Unsplash', url: 'https://unsplash.com' }
                    ]
                }
            ]
        };

        // 渲染导航内容
        function renderNav(searchText = '') {
            const container = document.getElementById('nav-container');
            container.innerHTML = '';
            
            navData.categories.forEach(category => {
                const filteredLinks = category.links.filter(link => 
                    link.name.toLowerCase().includes(searchText.toLowerCase()) || 
                    category.name.toLowerCase().includes(searchText.toLowerCase())
                );

                if(filteredLinks.length === 0) return;

                const categoryHtml = `
                    

                        
${category.name}
                        

                            ${filteredLinks.map(link => `
                                ${link.name}
                            `).join('')}
                        
                    
                `;
                container.innerHTML += categoryHtml;
            });
        }

        // 搜索功能
        document.getElementById('search').addEventListener('input', function(e) {
            renderNav(e.target.value);
        });

        // 初始渲染
        renderNav();
    </script>

    
    
    


    

        
网址管理
        

            

                
            
            

                
            
            

                
            
            添加网址
        

        

        
        

            返回首页
        
    

    <script>
        // 加载数据
        let navData = JSON.parse(localStorage.getItem('navData')) || { categories: [] };

        // 渲染链接列表
        function renderLinks() {
            const container = document.getElementById('links-list');
            container.innerHTML = '';
            
            navData.categories.forEach((category, catIndex) => {
                category.links.forEach((link, linkIndex) => {
                    const div = document.createElement('div');
                    div.className = 'link-item';
                    div.innerHTML = `
                        

                            ${link.name} - 
                            ${link.url} 
                            (分类: ${category.name})
                        
                        

                            编辑
                            删除
                        
                    `;
                    container.appendChild(div);
                });
            });
        }

        // 添加链接
        function addLink() {
            const name = document.getElementById('link-name').value;
            const url = document.getElementById('link-url').value;
            const category = document.getElementById('link-category').value;

            if(!name || !url || !category) return alert('请填写所有字段');

            // 查找或创建分类
            let cat = navData.categories.find(c => c.name === category);
            if(!cat) {
                cat = { name: category, links: [] };
                navData.categories.push(cat);
            }

            cat.links.push({ name, url });
            localStorage.setItem('navData', JSON.stringify(navData));
            renderLinks();
            clearForm();
        }

        // 删除链接
        function deleteLink(catIndex, linkIndex) {
            navData.categories[catIndex].links.splice(linkIndex, 1);
            // 如果分类为空则删除分类
            if(navData.categories[catIndex].links.length === 0) {
                navData.categories.splice(catIndex, 1);
            }
            localStorage.setItem('navData', JSON.stringify(navData));
            renderLinks();
        }

        // 清空表单
        function clearForm() {
            document.getElementById('link-name').value = '';
            document.getElementById('link-url').value = '';
            document.getElementById('link-category').value = '';
        }

        // 初始化渲染
        renderLinks();
    </script>

使用方法：

1. 将两个HTML文件保存在本地硬盘同一文件夹
2. 用浏览器打开index.html访问前台
3. 点击"管理后台"进入后台页面
4. 在后台页面添加/删除链接

PS

• 所有数据存储在浏览器本地，清空浏览器缓存会丢失数据
• 如果需要多设备同步，需要自行添加服务器端存储
• 如果显示乱码 可以自行修改
• 为