请教复选框传值到下一个页面并显示？

Question

我希望选择某几行，然后点复制，就能将选中的这些姓名全部复制到剪贴板。注意我要求的是：我粘贴的时候，这些姓名要是一行一个被粘贴。

如果做不到，那就简单一点：选中后点下一步，选中的这些姓名被传到一个新的页面并按每行一个显示出来。

请教老师高手能实现吗。谢谢。

   <table>
        <thead>
            <th><input type="checkbox"> 全选</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </thead>
        <tbody>
            <tr class="tr1">
                <td><input type="checkbox"></td>
                <td>张三</td>
                <td>女</td>
                <td>88</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>李四</td>
                <td>男</td>
                <td>18</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>王五</td>
                <td>女</td>
                <td>12</td>
            </tr>
        </tbody>
    </table>

Answer 1

可以用 url 查询参数传值，缺点是会发送给服务器，容量小

demo.html

<button onclick="next()">下一步</button>
<script>
  function next() {
    location = 'next.html?' + new URLSearchParams(
      [...document.querySelectorAll('tbody>tr')]
        .filter(tr => tr.querySelector('input').checked)
        .map(tr => ['name', tr.children[1].innerText])
    )
  }
</script>

next.html

<div></div>
<script>
  document.querySelector('div').innerText = new URLSearchParams(location.search).getAll('name').join('\n')
</script>

---

更推荐用 sessionStorage，存到本地，切换页面再读取，不会发送给服务器，容量大
类似的还有 localStorage，区别是 localStorage 是持久存储，sessionStorage 关闭页面会自动清除数据

demo.html

<button onclick="next()">下一步</button>
<script>
  function next() {
    sessionStorage.setItem('names',
      JSON.stringify([...document.querySelectorAll('tbody>tr')]
        .filter(tr => tr.querySelector('input').checked)
        .map(tr => tr.children[1].innerText)))
    location = 'next.html'
  }
</script>

next.html

<div></div>
<script>
  document.querySelector('div').innerText = JSON.parse(sessionStorage.getItem('names')).join('\n')
</script>

Answer 2

选中存到localstorage里 到下个页面取出来显示

Answer 3

楼上也说了一个localstorage，其实还有 sessionstorage。
同域名的window.iframe之间的传值，跨域的 Window.postMessage()。