localStorage没有维护jquery函数对页面刷新的影响。
localStorage没有维护jquery函数对页面刷新的影响。
提问于 2019-06-21 15:30:46
我正在从php数组中提取员工姓名列表，并将其显示在html页面上。当单击员工姓名(通过jQuery)时，其名称将变为红色(通过css)。现在，我有一个使用localStorage的函数，因为我试图维护单击的员工页面刷新的红色状态，或者不管哪个用户查看页面，但是现在当我刷新页面时，红色字体恢复到正常状态，就好像它没有被单击一样。
我尝试在一个localStorage函数中使用jQuery来维护状态，这种状态是基于员工的id#从PHP数组中提取并以HTML显示出来的。
HTML/PHP
<td>
<span class="EmpFullName" id="<?php echo trim($data['Id']);?>"><strong>
<?php echo $data['EmpFullName'];?></strong><br></span>
</td>jQuery
$( document ).ready(function() {
let ls = window.localStorage;
let storeKey = 'item-clicked';
$('.EmpFullName').click(function() {
$(this).toggleClass('clicked');
if(ls)
{
let str = ls.getItem(storeKey), arr;
if(str)
{
try{
arr = JSON.parse(str);
}
catch(e){
};
}
if(!Array.isArray(arr))
{
arr=[];
}
let clicked = $(this).hasClass('clicked');
let index = arr.indexOf(this.id);
if(clicked)
{
if(index === -1)
{
arr.push(this.id);
}
}
else
{
if(index > -1)
{
arr.splice(index, -1);
}
}
ls.setItem(storeKey, JSON.stringify(arr));
}
});
let str = ls ? ls.getItem(storeKey) : '';
if(str)
{
let arr;
try{
arr = JSON.parse(str);
}
catch(e){
}
if(Array.isArray(arr))
{
arr.forEach(function(id)
{
$('#' + id).toggleClass('clicked');
});
}
}
});CSS
.clicked{
color: red;
font-weight: bold;
}回答 1
Stack Overflow用户
回答已采纳
发布于 2019-06-21 15:42:08
问题在于您试图获取ID属性的方式。
this.id是未定义的，应该使用$(this).attr('id')。
另外，当从数组中删除元素时，您应该使用arr.splice(index, 1);而不是arr.splice(index, -1);，因为第二个参数意味着“要删除多少个元素”。
关于一般的代码样式，我建议您使用return early pattern。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56706422
复制相关文章
相似问题
腾讯云开发者
