# 书签管理

**Repository Path**: singsin/bookmarks

## Basic Information

- **Project Name**: 书签管理
- **Description**: 书签管理：一款高效、易用的书签整理工具，帮助用户轻松收藏、分类和检索网页链接
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-29
- **Last Updated**: 2025-08-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

![输入图片说明](FireShot%20Capture%20001%20-%20%E4%B9%A6%E7%AD%BE%E7%AE%A1%E7%90%86%E7%B3%BB%E7%BB%9F%20-%20%5B%5D.png)

# 书签管理系统

一个功能完整的本地书签管理系统，使用纯HTML、CSS和JavaScript开发，所有数据存储在浏览器的localStorage中。

## ✨ 功能特性

### 📚 书签管理
- **添加书签**：包含名称、地址、备注、排序、分类等完整属性
- **编辑书签**：支持修改所有书签属性
- **删除书签**：带确认提示的安全删除
- **快速访问**：点击书签卡片直接打开网站

### 🏷️ 分类管理
- **添加分类**：自定义分类名称和颜色
- **删除分类**：删除分类时书签自动移到"未分类"
- **分类筛选**：按分类查看书签
- **颜色标识**：每个分类都有独特的颜色标识

### 🔍 搜索与排序
- **实时搜索**：支持搜索书签名称、地址和备注内容
- **多种排序**：按排序号、名称、创建时间排序
- **分类统计**：显示每个分类的书签数量

### 📤 数据管理
- **导出功能**：将所有数据导出为JSON文件
- **导入功能**：从JSON文件导入书签数据
- **数据合并**：导入时自动合并现有数据，避免重复
- **本地存储**：所有数据存储在浏览器localStorage中

### 🎨 用户体验
- **响应式设计**：完美适配桌面和移动设备
- **现代化UI**：采用毛玻璃效果和渐变设计
- **快捷键支持**：
  - `Ctrl+K` / `Cmd+K`：快速搜索
  - `Ctrl+N` / `Cmd+N`：添加书签
  - `ESC`：关闭模态框
- **动画效果**：流畅的交互动画
- **提示消息**：操作成功/失败的及时反馈

## 🚀 使用方法

### 快速开始
1. 直接打开 `index.html` 文件即可使用
2. 首次运行会自动创建默认分类
3. 点击"添加书签"开始创建您的第一个书签

### 导入示例数据
1. 点击页面右上角的"导入"按钮
2. 选择 `sample_bookmarks.json` 文件
3. 系统会自动导入示例书签和分类

### 数据备份
1. 点击"导出"按钮
2. 系统会自动下载包含所有数据的JSON文件
3. 文件名格式：`bookmarks_backup_YYYY-MM-DD.json`

## 📂 文件结构

```
as.nav/
├── index.html              # 主页面文件
├── styles.css              # 样式文件
├── app.js                  # 主应用逻辑
├── storage.js              # 数据存储模块
├── sample_bookmarks.json   # 示例数据文件
└── README.md              # 说明文档
```

## 🛠️ 技术架构

### 前端技术
- **HTML5**：语义化结构
- **CSS3**：现代化样式，支持响应式设计
- **原生JavaScript**：无依赖的纯JS实现

### 数据存储
- **localStorage**：浏览器本地存储
- **JSON格式**：结构化数据存储
- **数据验证**：完整的输入验证机制

### 架构模式
- **模块化设计**：存储层和应用层分离
- **事件驱动**：基于DOM事件的交互
- **面向对象**：使用ES6类组织代码

## 📊 数据结构

### 书签对象
```javascript
{
  id: 1,                                    // 唯一ID
  name: "GitHub",                           // 书签名称
  url: "https://github.com",                // 网址
  notes: "全球最大的代码托管平台",           // 备注
  sort: 10,                                 // 排序号
  category: "work",                         // 分类ID
  created: "2024-01-01T10:00:00.000Z",     // 创建时间
  updated: "2024-01-01T10:00:00.000Z"      // 更新时间
}
```

### 分类对象
```javascript
{
  id: "work",                               // 分类ID
  name: "工作",                             // 分类名称
  color: "#28a745"                          // 分类颜色
}
```

## 🔧 自定义配置

### 修改默认分类
编辑 `storage.js` 文件中的初始化数据：
```javascript
categories: [
  { id: 'custom1', name: '自定义1', color: '#007bff' },
  { id: 'custom2', name: '自定义2', color: '#28a745' }
]
```

### 修改颜色方案
编辑 `styles.css` 文件中的CSS变量或渐变色：
```css
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
```

### 添加新功能
系统采用模块化设计，可以轻松扩展：
- 在 `storage.js` 中添加数据操作方法
- 在 `app.js` 中添加UI交互逻辑
- 在 `styles.css` 中添加样式

## 🌟 最佳实践

### 书签命名
- 使用简洁明了的名称
- 避免过长的标题
- 统一命名规范

### 分类管理
- 合理规划分类层级
- 控制分类数量（建议不超过10个）
- 使用不同颜色区分分类

### 数据管理
- 定期导出数据进行备份
- 清理无效或重复的书签
- 合理设置排序号

## 🔒 隐私和安全

- **本地存储**：所有数据仅存储在本地浏览器中
- **无网络请求**：除访问书签外，系统不发送任何网络请求
- **数据控制**：用户完全控制自己的数据
- **随时清理**：可通过浏览器设置清除所有数据

## 🐛 故障排除

### 数据丢失
- 检查浏览器是否清除了localStorage
- 尝试从备份的JSON文件恢复数据

### 功能异常
- 刷新页面重试
- 检查浏览器控制台是否有错误信息
- 确保浏览器支持localStorage

### 样式问题
- 确保CSS文件加载正常
- 清除浏览器缓存

## 📝 更新日志

### v1.0.0 (2025-08-29)
- 🎉 初始版本发布
- ✅ 完整的书签管理功能
- ✅ 分类管理和筛选
- ✅ 搜索和排序功能
- ✅ 数据导入导出
- ✅ 响应式设计
- ✅ 现代化UI界面

## 📧 技术支持

如果您在使用过程中遇到问题或有功能建议，欢迎提出反馈。

---

**享受您的书签管理体验！** 📚✨