设置并使用 localStorage 在表单编辑期间保留复选框选择
Set and use localStorage to retain checkbox selections during form edit
我有一个表单的一部分使用 jqGrid。此部分显示可通过复选框选择的用户信息。在审查页面上有一个编辑表单的选项，我试图在此过程中保留复选框选择。
我正在尝试为此使用 window.localStorage，但我不确定如何正确设置 Item。我在 loadComplete 中调用 getItem，我的编码在这里也可能不太正确。我现在所拥有的是，当用户进行编辑时，选择 jqGrid 中的第一个项目而不是实际保存的项目。我猜是因为我没有正确设置项目。谁能指导一下？
$.jgrid.gridUnload("#list");
myGrid = $("#list").jqGrid({
url: baseURL + '/scripts/get_user_list.php' + urlString,
datatype: "json",
mtype: 'POST',
width: 660,
height: '100%',
pager: '#pager',
rowNum: 10,
rowList: [20, 30, 40, 50, 60],
sortname: 'id',
sortorder: "asc",
viewrecords: true,
multiselect: true,
repeatitems: false,
imgpath: '/scripts/jquery-ui/images',
colNames: ['id', 'Building', 'Company ID', 'Description', 'Individual Name', 'SECCode'],
colModel: [
{name: 'id', index: 'id', jsonmap: 'id', hidden: true, width: 20},
{name: 'Building', index: 'Building', jsonmap: 'Building', hidden: true, width: 20},
{name: 'CompanyId', index: 'CompanyId', jsonmap: 'CompanyId', width: 110},
{name: 'Description', index: 'Description', jsonmap: 'Description', sortable: true, width: 300},
{name: 'IndName', index: 'IndName', jsonmap: 'IndName', width: 200},
{name: 'UsrNum', hidden: true, index: 'UsrNum', jsonmap: 'UsrNum'}
],
jsonReader: {
repeatitems: false,
root: 'rows',
id: '0',
cell: '',
subgrid: {
root: 'rows',
id: '0',
cell: '',
repeatitems: false
}
},
// subgrid support
subGrid: true,
subGridUrl: baseURL + '/scripts/get_user_list.php' + urlString,
subGridModel: [{
name: ['Date', 'ID'],
params: ['CompanyId'],
align: ['center', 'right'],
width: [150, 80]
}
],
ondblClickRow: function (id) {
$('#recId').val(id);
},
beforeRequest: function () {
blnGridLoading = true;
// console.log("beforeRequest(); setting blnGridLoading=true");
fnValidateAccount(); // Check that user has data available
},
loadComplete: function () {
$(':checkbox').each(function () {
var status = localStorage.getItem(this.id) === "false" ? false : true;
$(this).prop("checked", status);
});
blnGridLoading = false;
// console.log("loadcomplete(); setting
blnGridLoading = false;
// ");
for (swap in arySwap) {
if (typeof arySwap[swap]['CompanyId'] != 'undefined') {
$("#list").jqGrid('setSelection', arySwap[swap]['CompanyId']); // select companyId
}
}
fnValidateAccount(); // Check that user has data available
},
});
这是 loadComplate 中的 localStorage.getItem，与其余代码隔离：
$(':checkbox').each(function () {
var status = localStorage.getItem(this.id) === "false" ? false : true;
$(this).prop("checked", status);
});
这是我为 setItem 所做的尝试，我不确定将它放在哪里或者这是否是正确的方式。
$(':checkbox').on('change', function () {
//set the check value of checkbox
localStorage.setItem(this.id, this.checked);
});
展示位置
您当前对 getItem 的放置是正确的。你也应该把 setItem 块放在那里。在 loadComplete 中，这意味着一旦 jqGrid 被加载，您的 getItem 将 运行，setItem 事件也将绑定到复选框。
本地存储机制
localStorage 只支持存储键值对，值只能是String。这意味着如果您将键 customCheckbox 设置为 true 并且 运行 查询该键，则 return 值将是 "true"
localStorage.setItem('test', true); // item set
localStorage.getItem('test') // returns "true"; string, not boolean.
但是，有一种方法可以定义一个键并将对象存储到该键中。您应该在存储前使用 JSON.stringify()，在检索后使用 JSON.parse()。
let person = {name: 'John', age: 30, weight: 60} // a pure object.
localStorage.setItem('testPerson', JSON.stringify(person)); // object stringified;
localStorage.getItem('testPerson') // returns a stringified version of 'person' object;
// to use the stored stringified object like a regular object, you need to parse it.
person = JSON.parse(localStorage.getItem('testPerson'));
在你的代码中
您为每个不同的复选框使用了不同的键，因此您的键和值对于整个脚本或同一页面上的其他一些脚本是完全开放的。您可能不小心最终删除或修改了这些键的值，或者 可能不会 。此外，其他页面可以修改这些项目，因为它们在 localStorage 上。所以尽量设置唯一键。
注意：打开浏览器检查器并检查 storage 选项卡以检查您的 localStorage 状态，左侧可能有一个带有 sessionStorage 的面板和 localStorage
逻辑
现在让我们谈谈您当前的逻辑。看起来在初始页面加载时，当没有 localStorage 的键时，您的所有复选框都会被选中。这是故意的吗？
就算是，我们来分解一下：
var status = localStorage.getItem(this.id) === "false" ? false : true;
如果没有这样的键集，localStorage.getItem('key') 会 return null。所以 null === "false" returns false 并且您的三元逻辑将 status 设置为 true
因此：
$(this).prop("checked", status); // sets all the checkboxes to checked at initial page load;
你应该做的是：
- 检查键查询 return 是否为
object 类型的值，因为 null 是 object 类型
- 如果是对象，立即将
status 设置为 false。因为当您将值设置为 true 或 false 时，它将是字符串类型，而不是对象。
- 如果不是对象类型，则检查与
'true' 和 'false' 比较的值并进行相应设置。
最后的逻辑是：
let status = typeof localStorage.getItem($(this).attr('id')) === 'object' ? false : localStorage.getItem($(this).attr('id')) === 'true';
片段
最后是一些代码，看看代码片段，
注意浏览器会return一个错误，因为一个iframe试图修改localStorage。但在你的最后提取代码以查看结果。
$(document).ready(function() {
$(':checkbox').each(function() {
let status = typeof localStorage.getItem($(this).attr('id')) === 'object' ? false : localStorage.getItem($(this).attr('id')) === 'true';
$(this).prop('checked', status);
// console.log(status, typeof localStorage.getItem($(this).attr('id')))
});
// setItem.
$(':checkbox').on('change', function() {
//set the check value of checkbox
localStorage.setItem($(this).attr('id'), $(this).prop('checked'));
console.log('updated, ', $(this).attr('id'));
console.log(localStorage);
});
$('#clear').on('click', function() {
localStorage.clear();
});
});
h3 {
margin: 40px 0;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js'></script>
<div class="container">
<div class="row">
<div class="col-12">
<h3>Checkboxes status to LocalStorage</h3>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">One</label>
</div>
</div>
<div class="col-12">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck2">
<label class="custom-control-label" for="customCheck2">Two</label>
</div>
</div>
<div class="col-12">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck3">
<label class="custom-control-label" for="customCheck3">Three</label>
</div>
</div>
<div class="col-12">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck4">
<label class="custom-control-label" for="customCheck4">Four</label>
</div>
</div>
<div class="col-12">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck5">
<label class="custom-control-label" for="customCheck5">Five</label>
</div>
</div>
<div class="col-12">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck6">
<label class="custom-control-label" for="customCheck6">Six</label>
</div>
</div>
<div class="col-12">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck7">
<label class="custom-control-label" for="customCheck7">Seven</label>
</div>
</div>
<div class="col-12">
<div class="form-group"></div>
<button id="clear" type="button" class="btn btn-danger">Clear LocalStorage</button>
</div>
</div>
</div>
我有一个表单的一部分使用 jqGrid。此部分显示可通过复选框选择的用户信息。在审查页面上有一个编辑表单的选项，我试图在此过程中保留复选框选择。
我正在尝试为此使用 window.localStorage，但我不确定如何正确设置 Item。我在 loadComplete 中调用 getItem，我的编码在这里也可能不太正确。我现在所拥有的是，当用户进行编辑时，选择 jqGrid 中的第一个项目而不是实际保存的项目。我猜是因为我没有正确设置项目。谁能指导一下？
$.jgrid.gridUnload("#list");
myGrid = $("#list").jqGrid({
url: baseURL + '/scripts/get_user_list.php' + urlString,
datatype: "json",
mtype: 'POST',
width: 660,
height: '100%',
pager: '#pager',
rowNum: 10,
rowList: [20, 30, 40, 50, 60],
sortname: 'id',
sortorder: "asc",
viewrecords: true,
multiselect: true,
repeatitems: false,
imgpath: '/scripts/jquery-ui/images',
colNames: ['id', 'Building', 'Company ID', 'Description', 'Individual Name', 'SECCode'],
colModel: [
{name: 'id', index: 'id', jsonmap: 'id', hidden: true, width: 20},
{name: 'Building', index: 'Building', jsonmap: 'Building', hidden: true, width: 20},
{name: 'CompanyId', index: 'CompanyId', jsonmap: 'CompanyId', width: 110},
{name: 'Description', index: 'Description', jsonmap: 'Description', sortable: true, width: 300},
{name: 'IndName', index: 'IndName', jsonmap: 'IndName', width: 200},
{name: 'UsrNum', hidden: true, index: 'UsrNum', jsonmap: 'UsrNum'}
],
jsonReader: {
repeatitems: false,
root: 'rows',
id: '0',
cell: '',
subgrid: {
root: 'rows',
id: '0',
cell: '',
repeatitems: false
}
},
// subgrid support
subGrid: true,
subGridUrl: baseURL + '/scripts/get_user_list.php' + urlString,
subGridModel: [{
name: ['Date', 'ID'],
params: ['CompanyId'],
align: ['center', 'right'],
width: [150, 80]
}
],
ondblClickRow: function (id) {
$('#recId').val(id);
},
beforeRequest: function () {
blnGridLoading = true;
// console.log("beforeRequest(); setting blnGridLoading=true");
fnValidateAccount(); // Check that user has data available
},
loadComplete: function () {
$(':checkbox').each(function () {
var status = localStorage.getItem(this.id) === "false" ? false : true;
$(this).prop("checked", status);
});
blnGridLoading = false;
// console.log("loadcomplete(); setting
blnGridLoading = false;
// ");
for (swap in arySwap) {
if (typeof arySwap[swap]['CompanyId'] != 'undefined') {
$("#list").jqGrid('setSelection', arySwap[swap]['CompanyId']); // select companyId
}
}
fnValidateAccount(); // Check that user has data available
},
});
这是 loadComplate 中的 localStorage.getItem，与其余代码隔离：
$(':checkbox').each(function () {
var status = localStorage.getItem(this.id) === "false" ? false : true;
$(this).prop("checked", status);
});
这是我为 setItem 所做的尝试，我不确定将它放在哪里或者这是否是正确的方式。
$(':checkbox').on('change', function () {
//set the check value of checkbox
localStorage.setItem(this.id, this.checked);
});
展示位置
您当前对 getItem 的放置是正确的。你也应该把 setItem 块放在那里。在 loadComplete 中，这意味着一旦 jqGrid 被加载，您的 getItem 将 运行，setItem 事件也将绑定到复选框。
本地存储机制
localStorage 只支持存储键值对，值只能是String。这意味着如果您将键 customCheckbox 设置为 true 并且 运行 查询该键，则 return 值将是 "true"
localStorage.setItem('test', true); // item set
localStorage.getItem('test') // returns "true"; string, not boolean.
但是，有一种方法可以定义一个键并将对象存储到该键中。您应该在存储前使用 JSON.stringify()，在检索后使用 JSON.parse()。
let person = {name: 'John', age: 30, weight: 60} // a pure object.
localStorage.setItem('testPerson', JSON.stringify(person)); // object stringified;
localStorage.getItem('testPerson') // returns a stringified version of 'person' object;
// to use the stored stringified object like a regular object, you need to parse it.
person = JSON.parse(localStorage.getItem('testPerson'));
在你的代码中
您为每个不同的复选框使用了不同的键，因此您的键和值对于整个脚本或同一页面上的其他一些脚本是完全开放的。您可能不小心最终删除或修改了这些键的值，或者 可能不会 。此外，其他页面可以修改这些项目，因为它们在 localStorage 上。所以尽量设置唯一键。
注意：打开浏览器检查器并检查 storage 选项卡以检查您的 localStorage 状态，左侧可能有一个带有 sessionStorage 的面板和 localStorage
逻辑
现在让我们谈谈您当前的逻辑。看起来在初始页面加载时，当没有 localStorage 的键时，您的所有复选框都会被选中。这是故意的吗？
就算是，我们来分解一下：
var status = localStorage.getItem(this.id) === "false" ? false : true;
localStorage.getItem('key') 会 return null。所以 null === "false" returns false 并且您的三元逻辑将 status 设置为 true
因此：
$(this).prop("checked", status); // sets all the checkboxes to checked at initial page load;
你应该做的是：
- 检查键查询 return 是否为
object类型的值，因为 null 是object 类型
- 如果是对象，立即将
status设置为false。因为当您将值设置为true或false时，它将是字符串类型，而不是对象。 - 如果不是对象类型，则检查与
'true'和'false'比较的值并进行相应设置。
最后的逻辑是：
let status = typeof localStorage.getItem($(this).attr('id')) === 'object' ? false : localStorage.getItem($(this).attr('id')) === 'true';
片段
最后是一些代码，看看代码片段， 注意浏览器会return一个错误，因为一个iframe试图修改localStorage。但在你的最后提取代码以查看结果。
$(document).ready(function() {
$(':checkbox').each(function() {
let status = typeof localStorage.getItem($(this).attr('id')) === 'object' ? false : localStorage.getItem($(this).attr('id')) === 'true';
$(this).prop('checked', status);
// console.log(status, typeof localStorage.getItem($(this).attr('id')))
});
// setItem.
$(':checkbox').on('change', function() {
//set the check value of checkbox
localStorage.setItem($(this).attr('id'), $(this).prop('checked'));
console.log('updated, ', $(this).attr('id'));
console.log(localStorage);
});
$('#clear').on('click', function() {
localStorage.clear();
});
});
h3 {
margin: 40px 0;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js'></script>
<div class="container">
<div class="row">
<div class="col-12">
<h3>Checkboxes status to LocalStorage</h3>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">One</label>
</div>
</div>
<div class="col-12">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck2">
<label class="custom-control-label" for="customCheck2">Two</label>
</div>
</div>
<div class="col-12">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck3">
<label class="custom-control-label" for="customCheck3">Three</label>
</div>
</div>
<div class="col-12">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck4">
<label class="custom-control-label" for="customCheck4">Four</label>
</div>
</div>
<div class="col-12">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck5">
<label class="custom-control-label" for="customCheck5">Five</label>
</div>
</div>
<div class="col-12">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck6">
<label class="custom-control-label" for="customCheck6">Six</label>
</div>
</div>
<div class="col-12">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck7">
<label class="custom-control-label" for="customCheck7">Seven</label>
</div>
</div>
<div class="col-12">
<div class="form-group"></div>
<button id="clear" type="button" class="btn btn-danger">Clear LocalStorage</button>
</div>
</div>
</div>