OneManager.js

OneManager.js 是什么？

OneManager.js 是一个轻量级的前端 JavaScript 库，为开发者提供了完整的用户认证和数据存储解决方案。它封装了与后端服务的通信逻辑，提供了类似 localStorage 的简单 API，帮助前台人员快速构建现代化的 Web 应用。

使用 OneManager.js，您可以：

• 快速实现用户注册、登录、密码重置等认证功能
• 使用类似 localStorage 的简单 API 进行数据存储和管理
• 支持异步和同步两种数据操作模式
• 自动处理数据的加载和保存
• 轻松集成到现有的前端项目中

核心功能

API 文档

1. OneManager 类

主要的 API 客户端类，用于与后端服务通信。

构造函数

new OneManager(baseUrl, appKey = '')

参数：

• baseUrl - 后端服务的基础 URL
• appKey - 可选，API 密钥，用于身份验证

核心方法

• async register(username, password, birthday) - 用户注册
• async login(username, password) - 用户登录
• async resetPassword(username, birthday, newPassword) - 密码重置
• async autoLogin() - 自动登录
• saveLoginInfo(username, password) - 保存登录信息到本地存储
• removeLoginInfo() - 从本地存储移除登录信息

2. OneStorage 类

封装 OneManager，提供类似 localStorage 的异步 API。

构造函数

new OneStorage(oneManager, externalUserId, storageType = 'extraSmall')

3. OneStorageSync 类

封装 OneManager，提供类似 localStorage 的同步 API，带有延迟保存机制。

构造函数

new OneStorageSync(oneManager, externalUserId, storageType = 'extraSmall')

核心方法

• async load() - 从服务器加载数据
• getItem(key) - 获取指定键的值（同步）
• setItem(key, value) - 设置指定键的值（同步）
• removeItem(key) - 移除指定键（同步）
• clear() - 清空所有数据（同步）
• async saveImmediately() - 强制立即保存数据到服务器

查看完整 API 文档

示例应用：私人日记本

我们提供了一个完整的示例应用 demo-diary.html，展示了如何使用 OneManager.js 构建一个功能完整的私人日记本应用。

如何运行示例？

1. 确保后端服务正在运行（默认端口 3000）
2. 在浏览器中打开 demo-diary.html
3. 注册一个新账号或使用已有账号登录
4. 开始创建和编辑你的日记

示例代码结构

// 初始化 OneManager
const oneManager = new OneManager('http://localhost:3000', 'demo-diary-key-789');

// 自动登录
autoLogin();

// 创建 OneStorageSync 实例
const storage = new OneStorageSync(oneManager, username);

// 加载数据
await storage.load();

// 获取日记列表
const diaries = storage.getItem('diaries') || [];

// 创建新日记
function createNewDiary() {
    const newDiary = {
        id: Date.now().toString(),
        title: '',
        content: '',
        date: new Date().toISOString(),
        color: '#ffffff'
    };
    
    diaries.push(newDiary);
    storage.setItem('diaries', diaries);
}

运行示例应用

快速开始

1. 引入 OneManager.js

<script src="js/OneManager.js"></script>

2. 初始化 OneManager

// 初始化 OneManager 实例
const BASE_URL = 'http://localhost:3000';
const API_KEY = 'your-api-key';
const oneManager = new OneManager(BASE_URL, API_KEY);

3. 实现用户认证

// 注册新用户
async function registerUser(username, password, birthday) {
    try {
        const result = await oneManager.register(username, password, birthday);
        console.log('注册成功:', result);
    } catch (error) {
        console.error('注册失败:', error);
    }
}

// 用户登录
async function loginUser(username, password) {
    try {
        const result = await oneManager.login(username, password);
        console.log('登录成功:', result);
        
        // 保存登录信息
        oneManager.saveLoginInfo(username, password);
        
        // 初始化应用
        initApp(username);
    } catch (error) {
        console.error('登录失败:', error);
    }
}

// 自动登录
async function autoLogin() {
    const autoLoginResult = await oneManager.autoLogin();
    if (autoLoginResult.success) {
        initApp(autoLoginResult.username);
    } else {
        showLoginScreen();
    }
}

4. 使用 OneStorageSync 进行数据管理

async function initApp(externalUserId) {
    // 创建 OneStorageSync 实例
    const storage = new OneStorageSync(oneManager, externalUserId);
    
    // 添加保存错误处理
    storage.onSaveError = function(error) {
        console.error('自动保存失败:', error);
        alert('自动保存失败，请手动保存！');
    };
    
    // 加载数据
    await storage.load();
    
    // 获取数据
    const userData = storage.getItem('userData') || {};
    const settings = storage.getItem('settings') || {
        theme: 'light',
        fontSize: 16
    };
    
    // 设置数据
    function updateSettings(newSettings) {
        storage.setItem('settings', {...settings, ...newSettings});
    }
    
    // 删除数据
    function clearUserData() {
        storage.removeItem('userData');
    }
}