xiaomubiao-master/BROWSER_STORAGE_GUIDE.md

浏览器存储管理指南

🌐 如何访问您的数据存储

步骤指南

1. 打开开发者工具

• 快捷键: F12 或 Ctrl+Shift+I
• 右键菜单: 右键点击页面 → "检查" 或 "开发者工具"

2. 切换到Application标签

• 在开发者工具顶部找到 "Application" 标签并点击
• 如果没有看到，点击 ">>" 符号查找更多标签

3. 导航到Local Storage

Application面板左侧结构:
├── Application (应用)
├── Storage (存储) ← 重点关注这里
│   ├── Local Storage ← 您的数据在这里
│   │   └── https://your-domain.com
│   ├── Session Storage
│   ├── IndexedDB
│   ├── Cookies
│   └── ...
├── Background Services (后台服务)
└── Frames (框架)

4. 查看其他装备数据

在Local Storage中查找：

• 键名: index-otherEquipmentList
• 值: JSON格式的设备数据

🔧 数据操作方法

查看数据内容

// 在Console标签中运行
const equipmentData = localStorage.getItem('index-otherEquipmentList');
console.log('原始数据:', equipmentData);

// 解析并美化显示
const parsed = JSON.parse(equipmentData || '[]');
console.table(parsed);

删除特定数据

// 删除所有其他装备数据
localStorage.removeItem('index-otherEquipmentList');

// 或者在Application面板中:
// Local Storage → 您的域名 → 右键点击 'index-otherEquipmentList' → Delete

备份数据

// 导出当前数据
const backup = localStorage.getItem('index-otherEquipmentList');
console.log('备份数据 (请复制保存):', backup);

// 下载为文件
const blob = new Blob([backup], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'equipment-backup.json';
a.click();

恢复数据

// 从备份恢复数据 (替换 YOUR_BACKUP_DATA 为实际的备份数据)
const backupData = 'YOUR_BACKUP_DATA';
localStorage.setItem('index-otherEquipmentList', backupData);
location.reload(); // 刷新页面以加载数据

清空所有数据

// 清空特定项目的所有数据
localStorage.clear(); // 注意: 这会清空所有localStorage数据

// 更安全的方式 - 只清空相关数据
localStorage.removeItem('index-otherEquipmentList');
localStorage.removeItem('index-flyDeviceList');
localStorage.removeItem('index-carDeviceList');

📊 数据格式示例

localStorage中存储的数据格式

[
  {
    "equipmentId": "dy04",
    "equipmentType": "QB303设备",
    "category": "平台设备",
    "status": "正常",
    "online_status": true,
    "latitude": 28.20648476190476,
    "longitude": 112.8945530952381,
    "altitude": 200,
    "battleUnitCode": "dy04",
    "lastUpdateTime": 1757295666670
  }
]

🎯 常用操作快速参考

快速查看当前数据

// 一行命令查看所有设备
JSON.parse(localStorage.getItem('index-otherEquipmentList') || '[]').forEach((d,i) => console.log(`${i+1}. [${d.equipmentId}] ${d.equipmentType} - ${d.status}`));

快速清空数据

// 清空并确认
localStorage.removeItem('index-otherEquipmentList');
console.log('数据已清空，当前数据:', localStorage.getItem('index-otherEquipmentList'));

快速添加测试数据

// 添加测试设备
testQB303Data();
console.log('测试数据已添加，当前设备数量:', JSON.parse(localStorage.getItem('index-otherEquipmentList') || '[]').length);

🔍 故障排除

如果找不到数据

1. 确认页面已加载: 刷新页面并等待加载完成
2. 检查域名: 确保选择了正确的域名
3. 检查键名: 查找 index-otherEquipmentList
4. 查看控制台: 检查是否有错误信息

如果数据格式错误

// 验证数据格式
try {
    const data = JSON.parse(localStorage.getItem('index-otherEquipmentList'));
    console.log('数据格式正确，设备数量:', data.length);
} catch (error) {
    console.error('数据格式错误:', error);
    // 清空损坏的数据
    localStorage.removeItem('index-otherEquipmentList');
}

💡 小贴士

1. 定期备份: 重要数据建议定期备份
2. 谨慎删除: localStorage删除后无法恢复
3. 格式验证: 手动编辑时注意JSON格式正确性
4. 浏览器限制: localStorage有大小限制(通常5-10MB)

使用这些方法，您可以完全控制您的其他装备数据存储！