JS插件如何实现本地存储同步_JavaScript本地存储插件开发与数据同步方法

{
  action: 'create',
  tableName: 'notes',
  data: { title: '新笔记', content: '...' },
  timestamp: 1712345678901,
  synced: false
}

class SyncStorage {
  constructor(apiEndpoint) {
    this.apiEndpoint = apiEndpoint;
    this.queue = [];
    this.init();
  }

  async init() {
    // 从 localStorage 恢复未完成的队列
    const saved = localStorage.getItem('sync_queue');
    this.queue = saved ? JSON.parse(saved) : [];
    // 尝试自动同步
    await this.sync();
  }

  enqueue(action, table, data) {
    const item = {
      id: Date.now() + Math.random(),
      action,
      table,
      data,
      timestamp: Date.now(),
      synced: false
    };
    this.queue.push(item);
    this.persistQueue();
    this.sync(); // 尝试立即同步
  }

  persistQueue() {
    localStorage.setItem('sync_queue', JSON.stringify(this.queue));
  }

  async sync() {
    for (let i = 0; i < this.queue.length; i++) {
      const item = this.queue[i];
      if (!item.synced) {
        try {
          const res = await fetch(this.apiEndpoint, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(item)
          });
          if (res.ok) {
            item.synced = true;
            this.queue.splice(i, 1);
            i--;
            this.persistQueue();
          }
        } catch (err) {
          console.warn('同步失败，稍后重试', item);
          break; // 停止后续发送，等待下次触发
        }
      }
    }
  }
}

window.addEventListener('online', () => {
  storage.sync();
});