Javascript 使用上一个HTML页面中的文本框值填充表格

我有一些JS，它将选中复选框的名称和值存储在一个页面上，然后单击按钮，将这些数据添加到第2页的表中

这是可行的，但现在我希望对包含数字的文本框也这样做。具体来说，我希望获取用户输入的值，并将其添加到表中的一个单元格中。最好的方法是什么？是否添加到现有函数中，或专门为文本框值创建单独的on button click函数

我在第2页添加了HTML表格的屏幕截图，以及我希望文本框值的位置（用红色矩形突出显示）

以下是我目前掌握的情况：

文本框的HTML（第1页）：

第2页的JS：

// Helper function
        function getUrlParameter(name) {
            name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
            var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
            var results = regex.exec(location.href);
            return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, '    '));
        };

        // actual code
        let table_data = getUrlParameter('table_data');
        let data_from_page_1 = JSON.parse(atob(table_data));

        for(let i = 0; i < data_from_page_1.length; i++){
            let row = $("<tr></tr>");
            let recordName = $("<td></td>").text(data_from_page_1[i].name);
            let recordValue = $("<td></td>").text(data_from_page_1[i].value);
            row.append(recordName, recordValue);
            $('#output_table').append(row);
        }

        // code to sum CPC column
        var sum1 = 0;

        $("#output_table tr > td:nth-child(2)").each(
        (_,el) => sum1 += Number($(el).text()) || 0
        );

        $("#sum1").text(sum1);

        //datetime stamp
        var dt = new Date();
        document.getElementById("datetime").innerHTML = dt.toLocaleString();

//Helper函数
函数getUrlParameter（名称）{
name=name.replace（/[\[]/，'\\['）。replace（/[\]]/，'\\]'）；
var regex=new RegExp（'[\\？&]'+name+'=（[^&\\]*））；
var results=regex.exec（location.href）；
返回结果===null？“”：decodeURIComponent（结果[1]。替换（/\+/g'）；
};
//实际代码
设table_data=getUrlParameter（'table_data'）；
让数据_from_page_1=JSON.parse（atob（table_data））；
for（设i=0；itd:n个子项（2）”。每个(
（_，el）=>sum1+=Number（$（el）.text（））|| 0
);
$（“sum1”）.text（sum1）；
//邮戳
var dt=新日期（）；
document.getElementById（“datetime”）.innerHTML=dt.toLocalString（）；

输出HTML表格（第2页）：

名称
价值
点击次数
总CPC：

---

正如@Manu Varghese评论中所述，方法是使用

会话存储

或

本地存储

首先，让我们区分两者。根据堆栈溢出问题，我们有以下答案：

localStorage和sessionStorage都扩展了存储。除了sessionStorage的预期“非持久性”之外，它们之间没有区别

也就是说，存储在localStorage中的数据会一直存在，直到显式删除为止。所做的更改将被保存，并可用于所有当前和将来的站点访问

对于会话存储，更改仅在每个选项卡上可用。所做的更改将保存并可用于该选项卡中的当前页面，直到其关闭。一旦关闭，存储的数据将被删除

考虑到它们的使用方式相同，并且您必须在更适合您的情况之间进行选择，我将继续使用

sessionStorage

为此，在第一页中，您必须使用：

sessionStorage.setItem（“键”、“值”）

当您感觉到更改时，可以将项目设置为正确的，如中所示

当您进入第二个页面时（就在jQuery调用其开始事件时），您将使用以下方法检索数据：

sessionStorage.getItem（“键”）

请记住，localStorage/sessionStorage可以支持有限的数据量。根据浏览器的实现（您可以自己在MDN（Mozilla开发网络）中推荐的链接中进行测试），即使该限制远大于URL，大多数浏览器每个源站也只能存储2.5MB到10MB的数据

此外，您可能希望避免将敏感数据存储在存储器中，这是由于一些原因，而这似乎不是一个投诉

给定情况下的实施

可以通过三个步骤修改代码：

更改保存数据的方式以使用存储器

创建包含数组的对象的JSON，而不是使用数组本身生成JSON。然后可以添加更多字段

加载JSON对象及其字段（数组和数字）

步骤1-更改为会话存储

刚才您在第1页上看到了Javascript，它创建了一个数据数组，并将该数据字符串化为JSON字符串

如果要使用存储而不是URL来存储所有数据，只需更改以下代码行：

let base64str=btoa（JSON.stringify（table_info））；
window.location=“page2.html？table_data=“+base64str；

要将数据保存到（本地/会话）存储器中的代码，请执行以下操作：

让jsonStr=JSON.stringify（table_info）；//转换为JSON字符串
sessionStorage.setItem（“oldData”，jsonStr）；//保存到存储
window.location=“page2.html”；//导航到其他页面

请注意，存储可以接收任何字符串，但只能接收字符串，然后我们可以删除

btoa

函数，但我们必须保留

字符串化

步骤2--添加更多要保存的数据

现在您有了一个JSON，它是一个项目数组。但您希望包含一个与此数组平行的字段。当然，不能将其包含在数组中，因为它是另一回事。所以，我们必须做的是创建一个JSON对象，它有一个数字字段和数组字段本身

您创建数组的函数完全正确，然后我们将使用与数组相同的“table_data”，并将其包含到一个新的JSON对象中：

let table_data=[]；//您拥有的阵列
$（'input[type=checkbox]'）。每个(
…其余的代码。。。
); // 创建数组的函数（我在这里缩写）
//创建具有数组和数字的对象
设jsonObj={
表_数据：表_数据，
点击次数：点击次数/*您的变量和此处的数字*/
};
$('#sales_order_form_button').click(function() {
        let table_info = [];
        $('input[type=checkbox]').each(
            function(index, value) {
            if($(this).is(':checked')) {
                table_info.push(
                    {
                        name: $(this).attr('name'),
                        value: $(this).attr('value'),
                    }
                );
            }
        });
        let base64str=btoa(JSON.stringify(table_info));

        window.location = "page2.html?table_data=" + base64str;
        });

// Helper function
        function getUrlParameter(name) {
            name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
            var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
            var results = regex.exec(location.href);
            return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, '    '));
        };

        // actual code
        let table_data = getUrlParameter('table_data');
        let data_from_page_1 = JSON.parse(atob(table_data));

        for(let i = 0; i < data_from_page_1.length; i++){
            let row = $("<tr></tr>");
            let recordName = $("<td></td>").text(data_from_page_1[i].name);
            let recordValue = $("<td></td>").text(data_from_page_1[i].value);
            row.append(recordName, recordValue);
            $('#output_table').append(row);
        }

        // code to sum CPC column
        var sum1 = 0;

        $("#output_table tr > td:nth-child(2)").each(
        (_,el) => sum1 += Number($(el).text()) || 0
        );

        $("#sum1").text(sum1);

        //datetime stamp
        var dt = new Date();
        document.getElementById("datetime").innerHTML = dt.toLocaleString();

<table id="output_table">
        <tr>
            <th>Name</th>
            <th>Value</th>
            <th>Number of Clicks</th>
        </tr>
        <tfoot>
            <tr>
                <th id="total" colspan="1">Total CPC:</th>
                <td id="sum1"></td>
            </tr>
    </tfoot>
    </table>

{
  number_of_clicks: 5216,
  table_data: [
    { name: "...", value: "..."},
    { name: "...", value: "..."},
    { name: "...", value: "..."},
    ...
  ]
}

        $('#next_page_button').click(function(){
        let table_info = [];
        // Do for checkboxes
        $('.campaignstrategy input[type=checkbox]').each(
            function(index, value){
            if($(this).is(':checked')){
                table_info.push(
                    {
                        name: $(this).attr('name'),
                        value: $(this).attr('value'),
                        type: 'checkbox'
                    }
                );
            }
        });
        $('.campaignstrategy input[type=text]').each(
            function(index, value){
                table_info.push(
                {
                    name: $(this).attr('name'),
                    value: $(this).attr('value'),
                    type: 'text'
                }
            );            
        });
        let base64str=btoa(JSON.stringify(table_info));
        window.location = "page2.html?table_data=" + base64str;
        });


        // Helper function
        function getUrlParameter(name) {
            name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
            var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
            var results = regex.exec(location.href);
            return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, '    '));
        };

        // actual code
        let table_data = getUrlParameter('table_data');
        let data_from_page_1 = JSON.parse(atob(table_data));

        // clear table
        $('#output_table').html("");

        // generator checboxes
        for(let i=0;i<data_from_page_1.length;i++){
            if(data_from_page_1[i].type == "checkbox"){
                let row = $("<tr></tr>");
                let recordName = $("<td></td>").text(data_from_page_1[i].name);
                let recordValue = $("<td></td>").text(data_from_page_1[i].value);
                let recordCount = $("<td></td>").text("");
                row.append(recordName, recordValue, recordCount); // not used but needed
                $('#output_table').append(row);
            }
        }

        // generate textboxes
        for(let i=0;i<data_from_page_1.length;i++){
            if(data_from_page_1[i].type == "text"){
                let row = $("<tr></tr>");
                let recordName = $("<td></td>").text("");
                let recordValue = $("<td></td>").text("");
                let recordCount = $("<td></td>").text(data_from_page_1[i].value);
                row.append(recordName, recordValue, recordCount);
                $('#output_table').append(row);
            }
        }