一个页面要两个不同的传值怎么办？

Question

这个代码页面只能一个。
我需要增加一个input传另一组值（不和第一个input同时使用，但是不想再另做一个页面。）。
请问怎么修改。谢谢。

   <table>
        <thead>
            <th></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>

   <table>
        <thead>
            <th></th>
            <th>班级</th>
            <th>一班</th>
            <th>二班</th>
        </thead>
        <tbody>
            <tr class="tr1">
                <td><input type="checkbox"></td>
                <td>88</td>
                <td>55</td>
                <td>22</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>

<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)))
  

    sessionStorage.setItem('names2',
    JSON.stringify(document.querySelector('.target>input').value]

    location = 'next.html'
}
</script>

Answer 1

再写入另外一个变量到缓存？

function next() {
    sessionStorage.setItem('names',
    JSON.stringify([...document.querySelectorAll('tbody>tr')]
    .filter(tr => tr.querySelector('input').checked)
    .map(tr => tr.children[1].innerText)))
  

    sessionStorage.setItem('names2',
    JSON.stringify(document.querySelector('.target>input').value]

    location = 'next.html'
}

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

Answer 2

模拟多个页？

let index = -1;
const pages = [{
    key: 'names', //保存到Storage的key
    getValue: () => document.querySelectorAll('tbody>tr')]
        .filter(tr => tr.querySelector('input').checked)
        .map(tr => tr.children[1].innerText),
    build: () => {
        // 构建页面..
    }
}, 
/*
加更多page
*/
];
function finish() {
    // ...
}
function reset() {
    index = -1;
    next();
}
function next() {
    if(index > -1 && index < pages.length) {
        const { key, getValue } = pages[index];
        sessionStorage.setItem(key, JSON.stringify(getValue()));        
    }
    const page = pages[++index];
    if(page) { page.build(); }
    else { finish(); }
}

// reset(); // pageloaded