最新资讯

  • 一个基于 bootstrap的HTML、CSS 和 JavaScript 的本地链接收藏管理工具，无需服务器支持，所有数据存储在浏览器本地

一个基于 bootstrap的HTML、CSS 和 JavaScript 的本地链接收藏管理工具，无需服务器支持，所有数据存储在浏览器本地

2026-02-01 07:00:39 栏目：最新资讯 7 阅读

本地链接收藏管理器

还在为平时浏览器首页加载慢，动则10多秒的等待而烦恼吗？

我这里有一个办法，一个就是把浏览器首页设置为空白，还有就是自己手动写一个主页，一个离线、存储在本地的首页。这个首页加载本地资源，本地资源足够小。

基于上述的想法，我基于bootstrap写了一个主页，可以导入现有书签，可以快速使用现有主流搜索引擎。

一个基于 HTML、CSS 和 JavaScript 的本地链接收藏管理工具，无需服务器支持，所有数据存储在浏览器本地。

功能特性

  • 本地存储: 所有链接数据保存在浏览器的 localStorage 中，无需服务器
  • 分类管理: 支持自定义分类，可对链接进行分类管理
  • 搜索过滤: 支持按名称、URL、描述和分类进行搜索
  • 书签导入: 支持从浏览器导出的 bookmarks.html 文件导入书签
  • 层级分类: 导入书签时保留目录层级结构
  • 响应式设计: 适配不同屏幕尺寸，支持移动端使用
  • 存储监控: 实时显示本地存储使用情况
  • 搜索引擎: 集成多个搜索引擎，可快速搜索互联网内容

界面预览

使用方法

基本操作

  1. 添加链接

    • 点击页面右上角的"添加链接"按钮
    • 在弹出的表单中填写链接名称、URL、分类和描述（可选）
    • 点击"保存"完成添加

  2. 编辑链接

    • 点击链接卡片右下角的"编辑"按钮（铅笔图标）
    • 修改相关信息后点击"保存"

  3. 删除链接

    • 点击链接卡片右下角的"删除"按钮（垃圾桶图标）
    • 确认删除操作

搜索和过滤

  1. 关键字搜索

    • 在顶部搜索框中输入关键字
    • 系统会实时过滤显示匹配的链接

  2. 分类筛选

    • 使用分类下拉菜单选择特定分类
    • 只显示该分类下的链接

导入书签

  1. 点击"添加链接"按钮，选择"导入书签"
  2. 选择从浏览器导出的 bookmarks.html 文件
  3. 可选择是否启用"为文件夹自动创建分类"选项
  4. 点击"导入"按钮完成操作

导入的书签将保留原有的目录层级结构，以 “目录1 / 子目录1 / 子子目录1” 的形式展示。

搜索引擎

页面顶部提供了快速搜索功能，支持以下搜索引擎：

  • 百度
  • Google
  • 必应 Bing
  • 360搜索
  • 搜狗搜索

技术实现

前端技术栈

  • HTML5
  • CSS3 (使用 Bootstrap 5 框架)
  • JavaScript (原生，面向对象编程)
  • Bootstrap Icons 图标库

数据存储

  • 使用浏览器 localStorage 存储所有链接数据
  • 实时监控存储使用情况，防止超出限制
  • 当存储使用超过60%时显示警告，超过80%时显示危险提示

代码结构

LinkManager (JavaScript 类)
├── 数据管理
│   ├── loadLinks() - 从 localStorage 加载数据
│   ├── saveLinks() - 保存数据到 localStorage
│   └── calculateStorageInfo() - 计算存储使用情况
├── UI 渲染
│   ├── renderLinks() - 渲染链接列表
│   └── updateCategoryOptions() - 更新分类选项
├── 链接操作
│   ├── saveLink() - 保存链接
│   ├── editLink() - 编辑链接
│   └── deleteLink() - 删除链接
├── 搜索过滤
│   └── filterLinks() - 过滤链接
├── 书签导入
│   ├── importBookmarks() - 导入书签
│   ├── parseBookmarks() - 解析书签文件
│   └── getCategoryHierarchy() - 获取目录层级结构
└── 事件处理
    ├── setupEventListeners() - 设置事件监听器
    └── bindLinkEvents() - 绑定链接事件

浏览器兼容性

  • Chrome 50+
  • Firefox 50+
  • Safari 10+
  • Edge 15+

注意事项

  1. 由于使用 localStorage 存储数据，清除浏览器数据会导致链接丢失
  2. localStorage 有存储限制（通常为 5-10MB），请注意不要存储过多链接
  3. 本应用为单机版，不同设备间数据不共享

开发说明

项目结构

首页/
├── index.html       # 主页面文件
├── bootstrap.min.css # Bootstrap CSS 框架
├── bootstrap-icons.css # Bootstrap Icons 图标库
├── bootstrap.bundle.min.js # Bootstrap JS 框架
└── README.md        # 项目说明文档

自定义样式

所有自定义样式都在 index.html 文件的