JavaScript使用localStorage实现存储列表数据

localStorage.setItem('stockList', JSON.stringify(['AAPL','MSFT','GOOGL']));

const stockList = JSON.parse(localStorage.getItem('stockList') || '[]');

// 初始化默认股票列表
const defaultStocks = ['AAPL', 'MSFT', 'GOOGL'];
localStorage.setItem('stockList', JSON.stringify(defaultStocks));

// 添加新股票代码
function addStock(code) {
  const list = JSON.parse(localStorage.getItem('stockList') || '[]');
  if (!list.includes(code)) {
    list.push(code);
    localStorage.setItem('stockList', JSON.stringify(list));
  }
}

// 删除股票代码
function removeStock(code) {
  const list = JSON.parse(localStorage.getItem('stockList') || '[]');
  const newList = list.filter(item => item !== code);
  localStorage.setItem('stockList', JSON.stringify(newList));
}

// 示例：添加特斯拉股票
addStock('TSLA'); // 列表变为['AAPL','MSFT','GOOGL','TSLA']

// 在/stockDetailPage页面中
const urlParams = new URLSearchParams(window.location.search);
const stockCode = urlParams.get('stockCode');

// 从localStorage获取完整列表（可选）
const allStocks = JSON.parse(localStorage.getItem('stockList') || '[]');

const StorageUtil = {
  set(key, value) {
    const data = typeof value === 'string' ? value : JSON.stringify(value);
    localStorage.setItem(key, data);
  },
  get(key) {
    const data = localStorage.getItem(key);
    try {
      return data ? JSON.parse(data) : null;
    } catch {
      return data;
    }
  },
  remove(key) {
    localStorage.removeItem(key);
  }
};

// 使用示例
StorageUtil.set('stockList', ['AMZN','NFLX']);
const stocks = StorageUtil.get('stockList');

function checkStorageSpace() {
  const total = localStorage.length;
  const used = JSON.stringify(localStorage).length / 1024; // 转为KB
  return { total, used };
}

try {
  localStorage.setItem('bigData', largeData);
} catch (e) {
  if (e.name === 'QuotaExceededError') {
    alert('存储空间不足！');
  }
}

// 存储时添加版本标记
localStorage.setItem('stockList_v2', JSON.stringify({
  version: 2,
  items: ['AAPL','MSFT']
}));

// 读取时根据版本处理
const data = JSON.parse(localStorage.getItem('stockList_v2'));
if (data.version === 2) {
  // 使用新版数据结构
} else {
  // 处理旧版数据
}