javascript 我需要保存一个html文件,以便在另一个窗口中使用

jpfvwuh4  于 2023-01-07  发布在  Java
关注(0)|答案(2)|浏览(92)

我有一个表单,在一个名为upload.html的文件中有5个输入。使用本地存储,我能够获得输入值,并在另一个名为result.html的文件中使用它们,该文件最初是空的。
现在,我想保存更新后的窗口result.html,并在单击upload.html中的某个按钮时调用它。具体该如何操作

nc1teljy

nc1teljy1#

您可以使用localStorage.setItem(https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage#examples)保存result.html中的值

bvjxkvbb

bvjxkvbb2#

你可以这样处理。
如果您的results.html是一个完全空的文件,并且除了存储从表单接收到的结果之外没有其他用途,那么您完全可以避免使用它,而只需要通过JS代码来使用它。
在继续编写代码之前,请注意以下几点:

  • 我忽略了upload.html的HTML部分,只发布了相关的JavaScript
  • 我假设您的输入在一个表单中,该表单具有subimit类型的按钮
  • 我还假设您的输入类型为文本、数字、密码或电子邮件,并且没有使用复选框、单选按钮、选择元素、文本区域等。为了简单起见,我做了这样的假设
  • 为了避免追踪标签,并避免检查它们如何以及是否与您的输入配对,我建议您的输入包含一个data-info属性,该属性的内容可以是解释输入的任何类型的文本-您甚至可以在那里重复这个问题,尽管这并不真正可取
  • 因为我使用的是showSaveFilePicker,所以打开Save As文件对话框只能在某些浏览器中工作,而不能在移动的设备上工作。

如果你对这些假设感到满意,而且它们对你很有效,请继续阅读。

const myBtn = document.getElementById("myBtn");

myBtn.onclick = async (e) => {
    const options = {
        types: [
            {
                description: "Results",
                accept: {
                    "text/html": [".html"],
                },
            },
        ],
    };

    const handle = await window.showSaveFilePicker(options);
    const writable = await handle.createWritable();

    // we don't want to submit the form
    e.preventDefault();

    // let's get the inputs and their values
    let myInputs = document.querySelectorAll("#myForm input");

    // dummy results.html + table included, as it was asked in the comment
    let myHtml = '<html lang="en"><head><meta charset="utf8"><title>Results</title></head><body><table><thead><tr><th>#</th><th>Question</th><th>Answer</th></thead><tbody>';

    // did we find any inputs within our form?
    if(myInputs.length > 0) {
        // to mark our rows
        let counter = 0;
        for(let i = 0; i < myInputs.length; i++) {
            counter++;

            let inpVal = myInputs[i].value;
            let inpInfo = myInputs[i].getAttribute('data-info');
            
            // building the rows
            let tempStr = '<tr><td>` + counter + '</td><td><strong>' + inpInfo + '</strong></td><td>' + inpVal + '</td></tr>';

            myHtml += tempStr;
        }
    }

    myHtml += '</tbody></table></body></html>';

    await writable.write(myHtml);
    await writable.close();

    return handle;
};

您需要对代码进行一些修改,以便使其为您工作-例如,您必须将myBtn替换为提交按钮的实际ID,将#myForm替换为实际表单的ID,等等。
如果您有多个表单,您可以展开它,以捕获来自所有表单的输入,但这样您就必须有一个按钮来负责所有表单(至少可以说,这是不寻常的)。此外,如果表单中有不同类型的表单元素,您需要修改示例,为复选框、单选按钮等添加额外的复选框和循环。

EDIT更正了代码中的一个严重错误,并添加了实际下载。

相关问题