使用值和所有内容保存整个 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("&");
}
玩得开心:)
我正在尝试保存一些 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("&");
}
玩得开心:)