将表存储在本地存储中并在第二页上检索相同的表答案

【问题标题】：store a table in localstorage and retrieve the same on the second page将表存储在本地存储中并在第二页上检索相同的表
【发布时间】：2018-11-26 12:09:28
【问题描述】：

我有一个如下所示的付款表

<table id="payment">
    <thead >
        <tr>
            <th>Item</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody >
        <tr>
            <td>tv</td>
            <td>$40.00</td>
        </tr>
        <tr>
            <td>phone</td>
            <td>$20.00</td>
            </tr> 
        <tr>
            <td>car</td>
            <td>$40.00</td>
            </tr>
        <tr>
            <td>dress</td>
            <td>$20.00</td>
        </tr>                    
    </tbody>
</table>

我试图将表存储在本地存储中

  //gets table
    var myTable = document.getElementById('payment');

    //gets rows of table
    var rowLength = myTable.rows.length;

    //loops through rows    
    for (i = 0; i < rowLength; i++){

        //gets cells of current row  
        var oCells = myTable.rows.item(i).cells;

        //gets amount of cells of current row
        var cellLength = oCells.length;

        //loops through each cell in current row
        for(var j = 0; j < cellLength; j++){

        // get your cell info here

            var cellVal = oCells.item(j).innerHTML;
            var myData = [ cellVal, cellVal ];
            localStorage.setItem( 'productdata', myData );

          }

在第 2 页中，我想像在第一页中一样显示表格。对如何保存和检索本地存储数据感到困惑。并将表格准确显示在第 2 页上。任何解决方案！

【问题讨论】：

为什么要这样做？而不是通过ajax。顺便说一句，您正在覆盖 productdata
除了我看不出你想这样做的原因之外，你在localStorage(rowLength * cellLength)次中覆盖了同一个键。您可以改为存储表 localStorage.setItem("productdata", myTable.outerHTML) 的 outerHTML 但这让我们回到我的第一句话。
好的。该表是一个成本估算器，我只想将数据传递到第二页。如何使用 ajax 来做同样的事情。请指导我如何将这些值存储在数据中并提交表单

标签： javascript php jquery arrays

【解决方案1】：

我想你可以存储为innerHTML

localStorage.setItem('table', document.getElementById('payment').innerHTML)

在第二页这样读

document.getElementById('payment').innerHTML = localStorage.getItem('table')

【讨论】：

【解决方案2】：

尝试以下逻辑，首先从表中获取数据。看看这个例子

const table = document.querySelector('table');
const tbody = table.tBodies[0];

function getDataset() {
    const rows = Array.from(tbody.rows);
    const dataset = rows.reduce((accumulator, currentValue) => {
        const [item, price] = Array.from(currentValue.cells);
        const data = {
            item: item.textContent,
            price: price.textContent
        };

        accumulator.push(data);
        
        return accumulator;
    }, []);


    return dataset;
}

const dataset = getDataset();

console.log(dataset);

<table id="payment">
<thead>
    <tr>
        <th>Item</th>
        <th>Price</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>tv</td>
        <td>$40.00</td>
    </tr>
    <tr>
        <td>phone</td>
        <td>$20.00</td>
    </tr>
    <tr>
        <td>car</td>
        <td>$40.00</td>
    </tr>
    <tr>
        <td>dress</td>
        <td>$20.00</td>
    </tr>
</tbody>
</table>

下一步是将数据集存储在示例代码中的本地存储中，您可以将console.log(dataset) 行替换为localStorage.setItem('dataset', JSON.stringify(dataset));。如果您刷新页面并检查密钥数据集下的本地存储，您将获得以下数据localStorage.getItem('dataset')

 "[{\"item\":\"tv\",\"price\":\"$40.00\"},{\"item\":\"phone\",\"price\":\"$20.00\"},{\"item\":\"car\",\"price\":\"$40.00\"},{\"item\":\"dress\",\"price\":\"$20.00\"}]"

现在，在下一页中，您可以检索数据的这种字符串化表示并将其解析为自然 javascript 数组和对象。这与以下代码JSON.parse(localStorage.getItem('dataset'))

最后你需要再次渲染表格。您可以通过多种方式在这里其中之一：

function render() {
    const dataset = JSON.parse(localStorage.getItem('dataset'));
    const output = document.querySelector('#output');

    const rows = dataset.map(data => {
        return `
            <tr>
                <td>${data.item}</td>
                <td>${data.price}</td>
            </tr>`;
    }).join('');

    output.innerHTML = `
        <table>
            <thead>
                <tr>
                    <th>Item</th>
                    <th>Price</th>
                </tr>
            </thead>

            <tbody>
                ${rows}
            </tbody>
        </table>`;
}

render();

render方法假设有一些带有id输出的div，在这里用从localstorage获取的数据绘制表格

【讨论】：