第六步：本地存储无忧——自动保存+版本快照+恢复机制

pnpm add lz-string dayjs

// utils/storage.js
export function initStorage() {
  try {
    const testKey = '__storage_test__';
    localStorage.setItem(testKey, 'ok');
    localStorage.removeItem(testKey);
    return { type: 'localStorage', available: true };
  } catch (e) {
    console.warn('localStorage unavailable:', e.name);
    return { type: 'memory', available: false, cache: new Map() };
  }
}

const storage = initStorage();
export default storage;

// utils/autoSave.js
let saveTimer = null;

export function autoSave(target, callback, debounceMs = 500) {
  const handler = () => {
    if (saveTimer) clearTimeout(saveTimer);
    saveTimer = setTimeout(() => {
      // ✅ 强制同步 DOM 值（避免 React/Vue 的异步更新导致读取旧值）
      if (target.tagName === 'TEXTAREA' || target.tagName === 'INPUT') {
        target.value = target.value; // 触发 value 同步
      }
      callback(target.value);
      saveTimer = null;
    }, debounceMs);
  };

  ['input', 'change', 'blur'].forEach(evt => 
    target.addEventListener(evt, handler)
  );

  // 富文本支持
  if (target.contentEditable === 'true') {
    const observer = new MutationObserver(handler);
    observer.observe(target, { childList: true, subtree: true });
  }

  return () => {
    ['input', 'change', 'blur'].forEach(evt => 
      target.removeEventListener(evt, handler)
    );
  };
}

// utils/snapshot.js
export async function createSnapshot(content, prevHash = '') {
  const timestamp = Date.now();
  const id = `${timestamp}-${Math.random().toString(36).substr(2, 9)}`;
  
  // ✅ 统一序列化为 UTF-8 JSON 字符串，规避 emoji/中文哈希不一致
  const normalized = JSON.stringify({ content }).replace(/\s/g, '');
  const hash = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(normalized));
  const hexHash = Array.from(new Uint8Array(hash))
    .map(b => b.toString(16).padStart(2, '0'))
    .join('');

  if (hexHash === prevHash) return null; // 无变更，跳过

  return { id, timestamp, content, hash: hexHash };
}

export function saveSnapshot(snapshot, namespace = 'app') {
  const key = `${namespace}:snapshots`;
  const snapshots = JSON.parse(localStorage.getItem(key) || '[]');
  
  // ✅ 保留最近 20 版，超限则移除最旧
  if (snapshots.length >= 20) snapshots.shift();
  snapshots.push(snapshot);
  
  // ✅ 容量预警（localStorage 实际限额约 5MB，预留缓冲）
  const totalSize = new Blob([JSON.stringify(snapshots)]).size;
  if (totalSize > 4 * 1024 * 1024) {
    console.warn('⚠️ LocalStorage usage > 4MB. Consider cleanup.');
  }
  
  localStorage.setItem(key, JSON.stringify(snapshots));
}

// utils/restore.js
export function restoreFromSnapshot(id, targetElement) {
  const snapshots = JSON.parse(localStorage.getItem('app:snapshots') || '[]');
  const snapshot = snapshots.find(s => s.id === id);
  if (!snapshot) return;

  // ✅ 清除当前未保存变更，避免混淆
  if (confirm(`确定恢复到「${dayjs(snapshot.timestamp).fromNow()}」版本？当前编辑内容将被替换。`)) {
    targetElement.value = snapshot.content;
    
    // ✅ 恢复光标位置（仅 textarea）
    if (targetElement.tagName === 'TEXTAREA' && snapshot.selection) {
      targetElement.setSelectionRange(
        snapshot.selection.start,
        snapshot.selection.end
      );
    }
    
    // ✅ 防意外离开
    window.addEventListener('beforeunload', preventUnload);
  }
}

function preventUnload(e) {
  e.preventDefault();
  e.returnValue = '';
}

// utils/robustStorage.js
export async function tryLocalStorage(key, value, fallback = () => {}) {
  try {
    localStorage.setItem(key, value);
  } catch (e) {
    if (e.name === 'QuotaExceededError') {
      console.warn('localStorage full → fallback to memory cache');
      fallback(value); // 如存入 Map
    } else if (e.name === 'SecurityError') {
      console.warn('localStorage blocked → using memory only');
      fallback(value);
    }
  }
}

// core/LocalStorageSync.js
class LocalStorageSync {
  constructor(options = {}) {
    this.target = options.target;
    this.namespace = options.namespace || 'app';
    this.debounceMs = options.debounceMs || 500;
    this.maxSnapshots = options.maxSnapshots || 20;
    this.init();
  }

  init() {
    this.unbind = autoSave(this.target, this.handleSave.bind(this), this.debounceMs);
  }

  async handleSave(content) {
    const snapshots = JSON.parse(localStorage.getItem(`${this.namespace}:snapshots`) || '[]');
    const last = snapshots.at(-1);
    const snapshot = await createSnapshot(content, last?.hash);
    if (snapshot) saveSnapshot(snapshot, this.namespace);
  }

  destroy() {
    this.unbind?.();
  }
}

// 使用示例（Vanilla JS）
const editor = document.getElementById('main-editor');
const sync = new LocalStorageSync({ target: editor });