Local-First 应用程序

class LocalFirstApp {
	constructor() {
		this.data = {};
		this.syncQueue = [];
		this.isOnline = navigator.onLine;
		this.lastSyncTime = 0;
		this.serverUrl = "https://api.example.com"; // 替换为实际的服务器URL
		this.user = null;

		window.addEventListener("online", () => this.handleOnline());
		window.addEventListener("offline", () => this.handleOffline());
	}

	// 创建或更新数据
	setItem(key, value) {
		this.data[key] = value;
		this.saveToLocalStorage();
		this.addToSyncQueue({ type: "set", key, value });
		if (this.isOnline) {
			this.sync();
		}
	}

	// 获取数据
	getItem(key) {
		return this.data[key];
	}

	// 删除数据
	removeItem(key) {
		delete this.data[key];
		this.saveToLocalStorage();
		this.addToSyncQueue({ type: "remove", key });
		if (this.isOnline) {
			this.sync();
		}
	}

	// 保存到本地存储
	saveToLocalStorage() {
		localStorage.setItem("appData", JSON.stringify(this.data));
	}

	// 从本地存储加载数据
	loadFromLocalStorage() {
		const storedData = localStorage.getItem("appData");
		if (storedData) {
			this.data = JSON.parse(storedData);
		}
	}

	// 改进同步队列
	addToSyncQueue(operation) {
		operation.timestamp = Date.now();
		operation.id = this.generateUniqueId();
		this.syncQueue.push(operation);
		this.saveToLocalStorage();
	}

	// 生成唯一ID
	generateUniqueId() {
		return Date.now().toString(36) + Math.random().toString(36).substr(2);
	}

	// 加密数据
	encryptData(data) {
		// 这里应该使用真正的加密算法，比如 AES
		// 为了演示，我们使用一个简单的 Base64 编码
		return btoa(JSON.stringify(data));
	}

	// 解密数据
	decryptData(encryptedData) {
		// 对应的解密操作
		return JSON.parse(atob(encryptedData));
	}

	// 保存到本地存储（加密版）
	saveToLocalStorage() {
		const encryptedData = this.encryptData({
			data: this.data,
			syncQueue: this.syncQueue,
			lastSyncTime: this.lastSyncTime,
		});
		localStorage.setItem("appData", encryptedData);
	}

	// 从本地存储加载数据（解密版）
	loadFromLocalStorage() {
		const encryptedData = localStorage.getItem("appData");
		if (encryptedData) {
			const decryptedData = this.decryptData(encryptedData);
			this.data = decryptedData.data;
			this.syncQueue = decryptedData.syncQueue;
			this.lastSyncTime = decryptedData.lastSyncTime;
		}
	}

	// 用户认证
	async login(username, password) {
		try {
			const response = await fetch(`${this.serverUrl}/login`, {
				method: "POST",
				headers: { "Content-Type": "application/json" },
				body: JSON.stringify({ username, password }),
			});
			if (response.ok) {
				const userData = await response.json();
				this.user = userData;
				this.saveToLocalStorage();
				return true;
			}
		} catch (error) {
			console.error("Login failed:", error);
		}
		return false;
	}

	// 注销
	logout() {
		this.user = null;
		this.data = {};
		this.syncQueue = [];
		this.saveToLocalStorage();
	}

	// 处理重新上线
	handleOnline() {
		this.isOnline = true;
		this.sync();
	}

	// 处理离线
	handleOffline() {
		this.isOnline = false;
	}

	// 初始化应用
	init() {
		this.loadFromLocalStorage();
		if (this.isOnline) {
			this.sync();
		}
	}
}

// 创建应用实例
const app = new LocalFirstApp();

// 初始化应用
app.init();

// 使用应用的异步函数
async function useApp() {
	// 用户登录
	const loggedIn = await app.login("username", "password");
	if (loggedIn) {
		console.log("登录成功");

		// 设置数据
		app.setItem("user_profile", {
			name: "Alice",
			age: 30,
			email: "alice@example.com",
		});

		// 获取数据
		const userProfile = app.getItem("user_profile");
		console.log("用户资料:", userProfile);

		// 更新数据
		app.setItem("user_profile", {
			...userProfile,
			age: 31,
		});

		// 添加新数据
		app.setItem("preferences", {
			theme: "dark",
			notifications: true,
		});

		// 删除数据
		app.removeItem("old_data");

		// 手动触发同步（通常不需要，因为设置和删除操作会自动触发同步）
		if (app.isOnline) {
			await app.sync();
		}

		// 注销
		app.logout();
		console.log("已注销");
	} else {
		console.log("登录失败");
	}
}

// 运行应用
useApp().catch(console.error);

// 监听在线状态变化
window.addEventListener("online", () => {
	console.log("设备重新上线，正在同步数据...");
});

window.addEventListener("offline", () => {
	console.log("设备离线，将在恢复连接后同步数据");
});