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

Question

我正在尝试保存一些 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团队是这样设计的。

Answer 1

我完全同意@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>

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

Answer 2

不知道你有什么问题 ;) 肯定可以做到！是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("&");
            }

玩得开心:)

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

Saving entire HTML structure with values and all

javascript

session-storage

persistent-storage