如何点击按钮从剪贴板/TXT导入完整JSON至localStorage？

数据老陈

2026-8-1

需求完全可实现，以下是两种场景的具体实现方案

一、剪贴板导入功能

点击按钮后读取剪贴板中的JSON文本，解析成对象后清空原有localStorage，再批量写入新键值对：

<button id="importFromClipboard">从剪贴板导入</button>

<script>
document.getElementById('importFromClipboard').addEventListener('click', async () => {
  try {
    // 读取剪贴板内容
    const clipboardText = await navigator.clipboard.readText();
    // 解析JSON数据
    const importData = JSON.parse(clipboardText);
    
    // 清空原有localStorage内容
    localStorage.clear();
    
    // 批量写入新数据
    Object.entries(importData).forEach(([key, value]) => {
      localStorage.setItem(key, value);
    });
    
    alert('导入成功');
  } catch (err) {
    alert(`导入失败：${err.message}`);
  }
});
</script>

二、本地TXT文件导入功能

通过文件选择框读取本地TXT文件内的JSON数据，后续逻辑和剪贴板导入一致：

<input type="file" id="importFromFile" accept=".txt">

<script>
document.getElementById('importFromFile').addEventListener('change', (e) => {
  const file = e.target.files[0];
  if (!file) return;
  
  const reader = new FileReader();
  reader.onload = (event) => {
    try {
      const fileContent = event.target.result;
      const importData = JSON.parse(fileContent);
      
      localStorage.clear();
      Object.entries(importData).forEach(([key, value]) => {
        localStorage.setItem(key, value);
      });
      
      alert('导入成功');
    } catch (err) {
      alert(`导入失败：${err.message}`);
    }
  };
  reader.readAsText(file);
});
</script>