使用 Javascript/Jquery 将数组添加到 href 链接

Question

我目前正在编写一个功能，用户将单击特定的电子邮件并将其添加到本地存储中的列表中，此后，用户将单击一个按钮，基本上该按钮应该流行一个 href 标签，以便将所有邮件地址复制到用户的默认电子邮件设置（在我的情况下为 Outlook）。

我的问题是如何将其转换为电子邮件格式？我尝试将其加载到标签中并且可以正常工作，但随后 Django 将其解释为 URL，而不是邮件列表？

到目前为止，我有以下内容：

<td class="virtualTd" onclick="putThis(this)">{{ client.email }}</td>

<script>
const emails_list = []
function putThis(control) {
var email = control.innerText;
emails_list.push(email);
}
</script>

这会用所有地址填充一个数组，

之后，用户可以点击此按钮将数据加载到本地存储，最终目的是加载outlook邮件

<a href="#" id="sendEmail" class="btn btn-primary" onclick="popEmail()"> Email Client </a>

<script>     

        function popEmail() {
           const jsonArr = JSON.stringify(emails_list);
           localStorage.setItem("array", jsonArr);
           const str = localStorage.getItem("array");
           const parsedArr = JSON.parse(str);
           console.log(parsedArr);
           var a = document.getElementById('sendEmail');
           a.href = parsedArr;
        }



</script>

Answer 1

为什么是 localStorage？

注意：用户很可能没有设置电子邮件客户端来处理对 mailto 的点击

也不可能有不同的Email separating character in HTML mail link is different across mail clients

Working example

let emails_list = []
window.addEventListener("load",function() {
  document.getElementById("tb").addEventListener("click", e => {
    const tgt = e.target;
    if (tgt.classList.contains("virtualTd")) {
      const email = tgt.textContent.trim();
      if (!emails_list.includes(email))
      emails_list.push(email);
    }
    if (emails_list.length>0) {
      const href = `mailto:${emails_list.join(",")}?subject=Test&body=Test%20Body` // or ";" 
      console.log(href)
      document.getElementById("mailDiv").innerHTML = `<a 
      href="${href}" class="btn btn-primary">Email Client</a>`
    }    
  });
})

<table>
  <tbody id="tb">
    <tr>
      <td>Joe</td>
      <td class="virtualTd">Joe@mail.com</td>
    </tr>
    <tr>
      <td>Fred</td>
      <td class="virtualTd">Fred@mail.com</td>
    </tr>
  </tbody>
</table>
<div id="mailDiv"></div>