使用浏览器的localStorage功能存储数据

// 存储字符串
localStorage.setItem('username', '张三');

// 存储对象（需要序列化）
const user = { name: '张三', age: 25 };
localStorage.setItem('user', JSON.stringify(user));

// 存储数组
const todos = ['任务1', '任务2', '任务3'];
localStorage.setItem('todos', JSON.stringify(todos));

// 读取字符串
const username = localStorage.getItem('username');
console.log(username); // 输出: 张三

// 读取对象（需要反序列化）
const user = JSON.parse(localStorage.getItem('user'));
console.log(user.name); // 输出: 张三

// 读取数组
const todos = JSON.parse(localStorage.getItem('todos'));
console.log(todos); // 输出: ['任务1', '任务2', '任务3']

// 删除单个键值
localStorage.removeItem('username');

// 清空所有数据
localStorage.clear();

// 检查键是否存在
if (localStorage.getItem('username')) {
  console.log('用户名已存在');
} else {
  console.log('用户名不存在');
}

// 保存主题偏好
function saveThemePreference(theme) {
  localStorage.setItem('theme', theme);
}

// 读取主题偏好
function getThemePreference() {
  return localStorage.getItem('theme') || 'light';
}

// 应用主题
const currentTheme = getThemePreference();
document.body.className = currentTheme;

// 监听输入变化，自动保存
const formInputs = document.querySelectorAll('input, textarea');
formInputs.forEach(input => {
  input.addEventListener('input', function() {
    localStorage.setItem(`form_${this.name}`, this.value);
  });
  
  // 页面加载时恢复数据
  const savedValue = localStorage.getItem(`form_${input.name}`);
  if (savedValue) {
    input.value = savedValue;
  }
});

// 保存侧边栏展开状态
function saveSidebarState(isCollapsed) {
  localStorage.setItem('sidebar_collapsed', isCollapsed);
}

// 读取侧边栏状态
function getSidebarState() {
  return localStorage.getItem('sidebar_collapsed') === 'true';
}

// 应用侧边栏状态
const sidebarCollapsed = getSidebarState();
if (sidebarCollapsed) {
  document.querySelector('.sidebar').classList.add('collapsed');
}

// 缓存API响应数据
async function fetchDataWithCache(url) {
  const cacheKey = `cache_${url}`;
  const cachedData = localStorage.getItem(cacheKey);
  
  if (cachedData) {
    const { data, timestamp } = JSON.parse(cachedData);
    const cacheAge = Date.now() - timestamp;
    
    // 如果缓存时间小于1小时，使用缓存数据
    if (cacheAge < 60 * 60 * 1000) {
      return data;
    }
  }
  
  // 获取新数据并缓存
  const response = await fetch(url);
  const data = await response.json();
  
  localStorage.setItem(cacheKey, JSON.stringify({
    data: data,
    timestamp: Date.now()
  }));
  
  return data;
}

function safeLocalStorageGet(key) {
  try {
    return localStorage.getItem(key);
  } catch (e) {
    console.warn('localStorage 读取失败:', e);
    return null;
  }
}

function safeLocalStorageSet(key, value) {
  try {
    localStorage.setItem(key, value);
    return true;
  } catch (e) {
    console.warn('localStorage 写入失败:', e);
    return false;
  }
}

function checkLocalStorageSpace() {
  try {
    const testKey = '__storage_test__';
    localStorage.setItem(testKey, 'test');
    localStorage.removeItem(testKey);
    return true;
  } catch (e) {
    return e instanceof DOMException && (
      e.code === 22 || // Chrome
      e.code === 1014 || // Firefox
      e.name === 'QuotaExceededError' || // Safari
      e.name === 'NS_ERROR_DOM_QUOTA_REACHED'
    );
  }
}

// 存储带版本号的数据
function saveVersionedData(key, data, version = '1.0') {
  const storageData = {
    version: version,
    data: data,
    timestamp: Date.now()
  };
  localStorage.setItem(key, JSON.stringify(storageData));
}

// 读取带版本号的数据
function loadVersionedData(key, currentVersion = '1.0') {
  const saved = localStorage.getItem(key);
  if (!saved) return null;
  
  try {
    const parsed = JSON.parse(saved);
    if (parsed.version === currentVersion) {
      return parsed.data;
    }
    // 版本不匹配，删除旧数据
    localStorage.removeItem(key);
    return null;
  } catch (e) {
    localStorage.removeItem(key);
    return null;
  }
}