使用值和所有内容保存整个 HTML 结构

Saving entire HTML structure with values and all

我正在尝试保存一些 html 结构,其值为 selected 和全部。

<select id="select-options-beneficiaries" aria-describedby="selector2">
    <option selected value="Jhon Doe">Jhon Doe</option>
    <option value="Jane Doe">Jane Doe</option>
    <option value="New Beneficiary">New Beneficiary</option>
</select>

我是这样保存这块的:

var htmlBeneficiariesData = document.getElementById('select-options-beneficiaries').innerHTML;
sessionStorage.setItem('htmlBeneficiariesData', htmlBeneficiariesData);

现在,当我尝试检索信息并将其添加到前面时,它不会保存 selected 值或输入中保存的值。

var sessionBeneficiariesData = sessionStorage.getItem('htmlBeneficiariesData');
$('#plan-beneficiaries-container').prepend(sessionBeneficiariesData);

有没有办法保存 HTML 结构,包括 selected 值和输入?

为什么我需要这样做? 好吧,例如 html 是使用 JS 创建的,因此当单击一个按钮时,它会像上面那样创建新的 HTML。

所以每次点击按钮,都会生成一个新的select和输入。 JS 生成的字段中的所有信息填写完后,您转到下一页,然后当您尝试返回时,信息(HTML 和值)丢失了(因为它是通过单击按钮生成)以及为什么这样做?为什么我不能改变它?因为UX团队是这样设计的。

我完全同意@trincot 的评论,但我能理解你的情况。如果我理解你的问题,我想这就是你要找的:

var htmlBeneficiariesData = document.getElementById('select-options-beneficiaries').innerHTML;
var htmlBeneficiariesDataSelected = document.getElementById('select-options-beneficiaries').selectedIndex; // get selected index
sessionStorage.setItem('htmlBeneficiariesData', htmlBeneficiariesData);
sessionStorage.setItem('htmlBeneficiariesDataSelected', htmlBeneficiariesDataSelected); // store selected index

var sessionBeneficiariesData = sessionStorage.getItem('htmlBeneficiariesData');
var sessionBeneficiariesDataSelected = sessionStorage.getItem('htmlBeneficiariesDataSelected'); // get selected index that was stored
document.querySelector('#plan-beneficiaries-container').innerHTML = sessionBeneficiariesData;
document.querySelector('#plan-beneficiaries-container').selectedIndex = sessionBeneficiariesDataSelected; // mark the selected index on the generated select
<p>Original</p>
<select id="select-options-beneficiaries" aria-describedby="selector2">
    <option selected value="Jhon Doe">Jhon Doe</option>
    <option value="Jane Doe">Jane Doe</option>
    <option value="New Beneficiary">New Beneficiary</option>
</select>
<hr />
<p>Generated</p>
<select id="plan-beneficiaries-container"></select>

注意:出于安全原因,这不适用于代码段,因此您必须自己进行测试。

不知道你有什么问题 ;) 肯定可以做到!是JAVASCRIPT!!! 一切皆有可能 - 甚至可能不会一直感觉饱满。 这在这里可以解决问题。但可以肯定的是,这既不优雅也不建议。 只是为了好玩。

            <!DOCTYPE HTML>
            <html>
                <head>
                    <title>Untitled</title>
                </head>
                <body>
                    <select id="select-options-beneficiaries" aria-describedby="selector2"  onchange="silly();">
                        <option selected value="Jhon Doe">Jhon Doe</option>
                        <option value="Jane Doe">Jane Doe</option>
                        <option value="New Beneficiary">New Beneficiary</option>
                    </select>
                   <br><br>
                    <textarea id="x" style="width:800px; height:200px;"></textarea>

                    <script>
                        function silly() {
                            value = document.getElementById("select-options-beneficiaries").value;
                            console.log(value);
                            options = document.getElementById("select-options-beneficiaries").childNodes;
                            var HTML = '<select id="select-options-beneficiaries" aria-describedby="selector2">\n';

                            for (i = 0; i < options.length; i++) {
                                var o = options[i].outerHTML;
                                if (o) {
                                    var test = 'value="' + value + '"';
                                    var x = o.indexOf(test);
                                    o = o.replace(' selected=""', '');
                                    if (o.indexOf(test) > -1) {

                                        o = o.replace('value="', 'selected ' + 'value="');
                                    }

                                    HTML = HTML + o + "\n"
                                }

                            }
                            HTML = HTML + "</select>"
                            sessionStorage.setItem('htmlBeneficiariesData', HTML);
                             document.getElementById("x").value=sessionStorage.getItem('htmlBeneficiariesData');

                        }
                    silly();  
                    </script>

                </body>
            </html>

如果您想使用您的代码 在您 html 添加一个脚本之后,这在这里也可能有效 首先在你保存之前得到选择

 value = document.getElementById("select-options-beneficiaries").value;

现在将此作为字符串添加到您的 innerHTML 中

 '<script>document.getElementById("select-options-beneficiaries").value="'+value+'";</script>\n" 

您现在首先将 html 设置错误,然后通过这段代码进行更正。

通常的方法是只存储所有的表单值,然后通过保存的数据重新创建所有的表单值。通常存储为 json 对象,然后由 javascript.

应用

例如,这里会将您的整个表单放入一个 URL 对象中。我将它用于 POST 请求以传输表单数据。 使用 decodeURIComponent,您将取回值并将它们全部应用到您的表单中。或者根据您的需要更改 decodeURIComponent 部分。

function serialize(form) {
                if (!form || form.nodeName !== "FORM") {
                    return;
                }
                var i, j, q = [];
                for (i = form.elements.length - 1; i >= 0; i = i - 1) {
                    if (form.elements[i].name === "") {
                        continue;
                    }
                    switch (form.elements[i].nodeName) {
                    case 'INPUT':
                        switch (form.elements[i].type) {
                        case 'text':
                        case 'tel':
                        case 'email':
                        case 'hidden':
                        case 'password':
                        case 'button':
                        case 'reset':
                        case 'submit':
                            q.push(form.elements[i].name + "=" + 
     encodeURIComponent(form.elements[i].value));
                            break;
                        case 'checkbox':
                        case 'radio':
                            if (form.elements[i].checked) {
                                q.push(form.elements[i].name + "=" + 
   encodeURIComponent(form.elements[i].value));
                            }
                            break;
                        }
                        break;
                    case 'file':
                        break;
                    case 'TEXTAREA':
                        q.push(form.elements[i].name + "=" + 
     encodeURIComponent(form.elements[i].value));
                        break;
                    case 'SELECT':
                        switch (form.elements[i].type) {
                        case 'select-one':
                            q.push(form.elements[i].name + "=" + 
       encodeURIComponent(form.elements[i].value));
                            break;
                        case 'select-multiple':
                            for (j = form.elements[i].options.length - 1; j >= 
       0; j = j - 1) {
                                if (form.elements[i].options[j].selected) {
                                    q.push(form.elements[i].name + "=" + 
       encodeURIComponent(form.elements[i].options[j].value));
                                }
                            }
                            break;
                        }
                        break;
                    case 'BUTTON':
                        switch (form.elements[i].type) {
                        case 'reset':
                        case 'submit':
                        case 'button':
                            q.push(form.elements[i].name + "=" + 
     encodeURIComponent(form.elements[i].value));
                            break;
                        }
                        break;
                    }
                }
                return q.join("&");
            }

玩得开心:)