javascript - 在 html 表中使用 LocalStorage 保存用户“SELECT INPUT”
问题描述
我有一个 HTML 表格，有问题和 8 SELECT ROW OR SELECT from user 要求用户选择数据，并且当用户选择选择时，它应该保存，因此当用户刷新/重新加载或关闭网页并打开网页备份数据必须显示他之前选择的内容。
我尝试了使用本地存储的简单方法来获取用户选择的数据以保存和显示第一个 select_row 但不起作用，因为当我尝试从同一个地方获取和保存数据时它会发生冲突。所以只是为了看看我在我的工作中做了什么，如果用户选择，我将代码行显示在脚本下
let doc, htm, bod, nav, M, I, S, Q, hC, aC, rC, tC; // for use on other loads
addEventListener('load', () => {
doc = document;
htm = doc.documentElement;
bod = doc.body;
nav = navigator;
M = tag => doc.createElement(tag);
I = id => doc.getElementById(id);
mobile = /Mobi/i.test(nav.userAgent);
S = (selector, within) => {
let w = within || doc;
return w.querySelector(selector);
}
Q = (selector, within) => {
let w = within || doc;
return w.querySelectorAll(selector);
}
hC = (node, className) => {
return node.classList.contains(className);
}
aC = (node, ...classNames) => {
node.classList.add(...classNames);
return aC;
}
rC = (node, ...classNames) => {
node.classList.remove(...classNames);
return rC;
}
tC = (node, className) => {
node.classList.toggle(className);
return tC;
}
// small Library above - magic below can be put on another page using a load Event *(except // end load line)*
const trs = Q('tbody>tr'),
trsL = trs.length,
prs = Q('tfoot>tr>td+td'),
prsM = prs.length - 1,
ya = [];
function showAverages() {
let total = 0;
for (let p = 0, c, t, l = ya.length; p < prsM; p++) {
c = 0;
for (let i = 0; i < l; i++) {
c += ya[i][p];
}
t = (c / l * 100).toFixed(2);
prs[p].textContent = t;
total += (+t);
}
$("#element").html((total / prsM).toFixed(2) + "%");
}
for (let i = 0, r, sels, y; i < trsL; i++) {
r = trs[i];
sels = Q('select', r);
ya.push([]);
for (let n = 0, s, q = sels.length; n < q; n++) {
s = sels[n];
s.value = 'Yes';
y = s.value === 'Yes' ? 1 : 0;
ya[i].push(y);
s.oninput = () => {
ya[i][n] = s.value === 'Yes' ? 1 : 0;
showAverages();
}
}
}
showAverages();
});
//Local Storage Script
let select_row = document.getElementById('select_row');
select_row.addEventListener('input', function() {
localStorage.setItem('select_row', select_row.value); // Use .value to get and set text of input but use .textContent to get and set text of other elements (textareas, divs, etc.)
})
// This should run on script load
select_row.value = localStorage.getItem('select_row');thead *,
tfoot * {
font: bold 16px Arial, san-serif;
}
tfoot>tr>td:not(:last-child):after {
content: '%';
font-weight: bold;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content-page">
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="page-title-box">
<h4 class="page-title"> WebForms                                            
                    Total Percent Complete = <span id="element"></span></h4>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<div class="table-responsive">
<h5 class="mt-0"> WebForm Tasks <br></h5>
<table id="datatable-buttons" class="table table-striped dt-responsive nowrap w-100" name="table">
<thead>
<tr>
<th class="th-sm">Tasks</th>
<th class="th-sm">Avi - Lead</th>
<th class="th-sm">Benito</th>
<th class="th-sm">Carlos</th>
<th class="th-sm">Greg</th>
<th class="th-sm">Krish</th>
<th class="th-sm">Roy</th>
<th class="th-sm">Dee</th>
<th class="th-sm">Notes</th>
</tr>
</thead>
<tbody>
<tr class="select_row">
<td>CR Service Request Form</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td> </td>
</tr>
<tr class="select_row">
<td>CR Pallet Reuqest Form</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td> </td>
</tr>
</tbody>
<tfoot>
<tr class="percent_row">
<td>Percent Complete </td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</tfoot>
</table>
</div>
<!-- end .table-responsive-->
</div>
<!-- end card-body -->
</div>
<!-- end card -->
</div>
<!-- end col -->
</div>
<!-- end row -->
</div>
<!-- container -->
</div>
</div>它将保存和显示但不起作用的任何数据。任何帮助将不胜感激
解决方案
当用户更改选择时，将所有选择的值放入一个数组中，并将其保存localStorage为 JSON。
当页面加载时，解析 JSON，然后更新数组中所有选择的值。
function save_selects() {
const select_values = Array.from(selects).map(s => s.value);
localStorage.setItem('select_values', JSON.stringify(select_values));
}
window.addEventListener("load", function() {
const selects = document.querySelectorAll(".select_row select");
selects.forEach(s => s.addEventListener('change', save_selects));
const loc = localStorage.getItem('select_values');
if (loc) {
const select_values = JSON.parse(loc);
selects.forEach((s, i) => s.value = select_values[i]);
}
});推荐阅读
- c++ - C++ 标准库是否提供更紧凑和更通用的擦除删除习惯用法？
- c++ - 重新加密加密的数据文件会生成一个解密的输出
- matlab - 如何编写运行分区的这个方程？
- java - 如何在不使用任何整数变量的情况下在按钮单击时在 Textview 上应用 If Else？
- solr - 向 Carrot2 WAR 文件添加身份验证
- android - 将枚举与数字一起使用
- python - openCV的conda错误-找不到符号
- amazon-web-services - 将 Amazon S3 用于客户图像和缩略图
- powershell - PowerShell - 如果是特定字符，则删除第一个字符
- api - 使用 GMail API 如何查看帐户上是否有现有手表？