点击按钮将localStorage数据复制到剪贴板的实现问题

你遇到的问题是页面脚本里直接用copy()方法无效——这个方法是浏览器控制台特有的API，页面环境不能直接调用。下面是修正后的完整方案：

第一步：修复按钮跳转问题 #

先修改你的a标签，避免点击后页面跳转：

<a href="javascript:void(0)" onclick="copyjson()">
  <div id="Shape1">
    <div id="Shape1_text">
      <span style="color:#303C49;font-family:Arial;font-size:16px;"><strong>Скопировать данные</strong></span>
    </div>
  </div>
</a>

第二步：替换为有效的复制函数 #

使用现代浏览器支持的Clipboard API，同时兼容旧浏览器的降级方案：

function copyjson() {
  // 将localStorage数据转为格式化的JSON字符串（缩进2空格，方便阅读）
  const localStorageJson = JSON.stringify(localStorage, null, 2);
  
  // 优先使用Clipboard API（需HTTPS/localhost环境）
  if (navigator.clipboard) {
    navigator.clipboard.writeText(localStorageJson)
      .then(() => alert('数据已成功复制到剪贴板'))
      .catch(err => {
        console.error('Clipboard API调用失败:', err);
        fallbackCopy(localStorageJson);
      });
  } else {
    // 旧浏览器直接用降级方案
    fallbackCopy(localStorageJson);
  }
}

// 降级复制函数：通过临时文本框实现复制
function fallbackCopy(text) {
  const tempTextarea = document.createElement('textarea');
  tempTextarea.value = text;
  // 把文本框移出可视区域
  tempTextarea.style.position = 'fixed';
  tempTextarea.style.left = '-9999px';
  tempTextarea.style.top = '-9999px';
  document.body.appendChild(tempTextarea);
  
  // 选中并复制文本
  tempTextarea.focus();
  tempTextarea.select();
  
  try {
    const success = document.execCommand('copy');
    success ? alert('数据已复制到剪贴板') : alert('复制失败');
  } catch (err) {
    console.error('降级复制失败:', err);
    alert('复制失败，请查看控制台获取数据');
    console.log('localStorage数据:', text);
  }
  
  // 移除临时元素
  document.body.removeChild(tempTextarea);
}

关键说明 #

• 控制台的copy()是浏览器给开发者提供的快捷方法，页面脚本没有权限直接调用，必须用标准的剪贴板操作逻辑
• Clipboard API是W3C标准方案，支持Chrome 66+、Firefox 63+等现代浏览器，需要页面处于安全上下文（HTTPS协议或localhost本地环境）
• 降级方案利用临时textarea元素和document.execCommand('copy')，兼容大部分旧浏览器
• 给a标签设置href="javascript:void(0)"可以阻止默认跳转行为，避免页面刷新

内容的提问来源于stack exchange，提问作者Максим Пилипчук