// 存儲(chǔ)對(duì)象示例
localStorage.setItem('user', JSON.stringify({ name: '張三', age: 30 }));
const user = JSON.parse(localStorage.getItem('user'));

// 存儲(chǔ)數(shù)據(jù)（自動(dòng)序列化）
localStorage.setItem('theme', 'dark');
sessionStorage.setItem('cart', JSON.stringify([{id:1,name:'商品A'}]));
// 讀取數(shù)據(jù)（自動(dòng)反序列化）
const currentTheme = localStorage.getItem('theme') || 'light';
const cartItems = JSON.parse(sessionStorage.getItem('cart')) || [];
// 刪除數(shù)據(jù)
localStorage.removeItem('theme');
sessionStorage.removeItem('cart');
// 清空存儲(chǔ)
localStorage.clear();
sessionStorage.clear();

// 在表單組件中
export default {
  data() {
    return {
      formData: {
        username: '',
        password: ''
      }
    }
  },
  mounted() {
    // 恢復(fù)上一次輸入
    this.formData = JSON.parse(sessionStorage.getItem('formData')) || this.formData;
  },
  watch: {
    formData: {
      handler: 'saveDraft',
      deep: true
    }
  },
  methods: {
    saveDraft() {
      sessionStorage.setItem('formData', JSON.stringify(this.formData));
    }
  }
}

// 主題切換實(shí)現(xiàn)
const THEME_KEY = 'app_theme';
const DEFAULT_THEME = 'light';
// 獲取主題
const getCurrentTheme = () => {
  return localStorage.getItem(THEME_KEY) || DEFAULT_THEME;
}
// 切換主題
const toggleTheme = () => {
  const newTheme = getCurrentTheme() === 'light' ? 'dark' : 'light';
  localStorage.setItem(THEME_KEY, newTheme);
  document.body.className = newTheme;
}
// 初始化主題
document.addEventListener('DOMContentLoaded', () => {
  const savedTheme = getCurrentTheme();
  document.body.className = savedTheme;
});

// 購(gòu)物車(chē)臨時(shí)存儲(chǔ)（僅當(dāng)前標(biāo)簽頁(yè)有效）
const CART_KEY = 'shopping_cart';
// 添加商品
const addToCart = (product) => {
  const cart = JSON.parse(sessionStorage.getItem(CART_KEY)) || [];
  cart.push(product);
  sessionStorage.setItem(CART_KEY, JSON.stringify(cart));
}
// 清空臨時(shí)數(shù)據(jù)（標(biāo)簽頁(yè)關(guān)閉自動(dòng)清除）
window.addEventListener('beforeunload', () => {
  sessionStorage.removeItem(CART_KEY);
});

import CryptoJS from 'crypto-js';
const SECRET_KEY = 'your-secret-key';
const encrypt = (data) => {
  return CryptoJS.AES.encrypt(JSON.stringify(data), SECRET_KEY).toString();
}
const decrypt = (ciphertext) => {
  const bytes = CryptoJS.AES.decrypt(ciphertext, SECRET_KEY);
  return JSON.parse(bytes.toString(CryptoJS.enc.Utf8));
}
// 存儲(chǔ)加密數(shù)據(jù)
localStorage.setItem('token', encrypt('user_token_123'));

const checkStorage = (storageType) => {
  try {
    const testData = 'x'.repeat(1024 * 1024); // 1MB測(cè)試數(shù)據(jù)
    let count = 0;
    while(true) {
      storageType.setItem(`test_${count}`, testData);
      count++;
    }
  } catch(e) {
    const usedSpaceMB = (count * 1) / 1024; // 粗略估算已用空間
    console.log(`已使用存儲(chǔ)空間：${usedSpaceMB.toFixed(2)}MB`);
    return usedSpaceMB;
  }
}
// 檢查L(zhǎng)ocalStorage剩余空間
checkStorage(localStorage);

// 批量寫(xiě)入優(yōu)化
const batchWrite = (storage, data) => {
  const transaction = [];
  Object.entries(data).forEach(([key, value]) => {
    transaction.push({ type: 'set', key, value });
  });
  // 模擬批量操作（實(shí)際瀏覽器會(huì)自動(dòng)優(yōu)化）
  transaction.forEach(({ key, value }) => {
    storage.setItem(key, value);
  });
}
// 使用示例
batchWrite(localStorage, {
  theme: 'dark',
  language: 'zh-CN',
  version: '2.0.1'
});

// 雙緩存機(jī)制（內(nèi)存+LocalStorage）
const createCache = (storageKey) => {
  let memoryCache = JSON.parse(localStorage.getItem(storageKey)) || {};
  return {
    get: (key) => memoryCache[key],
    set: (key, value) => {
      memoryCache[key] = value;
      localStorage.setItem(storageKey, JSON.stringify(memoryCache));
    }
  }
}
// 使用示例
const userCache = createCache('user_data');
userCache.set('profile', { name: '李四' });
const profile = userCache.get('profile');

// 錯(cuò)誤示例：不同域名無(wú)法訪(fǎng)問(wèn)
// 在 https://a.com 無(wú)法訪(fǎng)問(wèn) https://b.com 的 localStorage
// 解決方案：使用 postMessage 進(jìn)行安全通信
window.addEventListener('message', (e) => {
  if (e.origin === 'https://trusted-domain.com') {
    localStorage.setItem('sharedData', e.data);
  }
});

// 錯(cuò)誤處理示例
try {
  localStorage.setItem('largeData', new Array(10 * 1024 * 1024).fill('x').join(''));
} catch(e) {
  if (e instanceof DOMException && e.code === 22) {
    console.error('存儲(chǔ)空間不足，請(qǐng)清理緩存');
    // 自動(dòng)清理過(guò)期數(shù)據(jù)
    localStorage.removeItem('oldData');
  }
}

// 類(lèi)型校驗(yàn)方案
const safeParse = (data) => {
  try {
    return JSON.parse(data);
  } catch(e) {
    console.error('數(shù)據(jù)解析失敗:', e);
    return null;
  }
}
const userInfo = safeParse(localStorage.getItem('user'));

// 離線(xiàn)數(shù)據(jù)緩存策略
const syncOfflineData = async () => {
  if (!navigator.onLine) {
    // 緩存待提交數(shù)據(jù)
    const pendingData = getPendingData();
    localStorage.setItem('offlineQueue', JSON.stringify(pendingData));
  } else {
    // 聯(lián)網(wǎng)時(shí)同步數(shù)據(jù)
    const offlineData = JSON.parse(localStorage.getItem('offlineQueue') || '[]');
    offlineData.forEach(async (item) => {
      await fetch('/api/submit', { method: 'POST', body: JSON.stringify(item) });
    });
    localStorage.removeItem('offlineQueue');
  }
}
// 監(jiān)聽(tīng)網(wǎng)絡(luò)狀態(tài)變化
window.addEventListener('online', syncOfflineData);

// 使用 BroadcastChannel 實(shí)現(xiàn)跨標(biāo)簽頁(yè)通信
const channel = new BroadcastChannel('storage_sync');
// 監(jiān)聽(tīng)數(shù)據(jù)變化
channel.onmessage = (e) => {
  if (e.data.type === 'storage-update') {
    localStorage.setItem(e.data.key, e.data.value);
  }
}
// 修改數(shù)據(jù)時(shí)廣播
const setItemWithBroadcast = (key, value) => {
  localStorage.setItem(key, value);
  channel.postMessage({ type: 'storage-update', key, value });
}