使用localstorage保存页面加载时el - li元素的状态

Question

我试图保存li点击的状态，所以在页面加载时，它应该保持该项目打开

我的html

<div class="nav nav-list categories" id="left-side">
<ul class="left-menu">
<li class="has-child">
<a href="javascript:;">Men</a> 
<div class="left-sub-menu">
<ul class="list">
<li id="59_73"><a href="productlist.php?category=59&amp;secondary=73">Gowns 
(1) 
</a>
</li>
<li id="59_77"><a href="productlist.php?category=59&amp;secondary=77">Readymade suits 
(1) 
</a>
</li>

</ul>
</div>
</li>
<li class="has-child">
<a href="javascript:;">Women</a> 
<div class="left-sub-menu">
<ul class="list">
<li id="54_74"><a href="productlist.php?category=54&amp;secondary=74">Blouses 
(2) 
</a>
</li>
<li id="54_76"><a href="productlist.php?category=54&amp;secondary=76">Bridal Lenghas 
(2) 
</a>
</li>
<li id="54_70"><a href="productlist.php?category=54&amp;secondary=70">Fancy Duppata's 
(4) 
</a>
</li>
</ul>
</div>
</li>
<li class="has-child">
<a href="javascript:;">Girls Wear (1 - 12)</a> 
<div class="left-sub-menu">
<ul class="list">
<li id="57_74"><a href="productlist.php?category=57&amp;secondary=74">Blouses 
(2) 
</a>
</li>
<li id="57_76"><a href="productlist.php?category=57&amp;secondary=76">Bridal Lenghas 
(2) 
</a>
</li>
<li id="57_70"><a href="productlist.php?category=57&amp;secondary=70">Fancy Duppata's 
(2) 
</a>
</li>
<li id="57_73"><a href="productlist.php?category=57&amp;secondary=73">Gowns 
(2) 
</a>
</li>
<li id="57_72"><a href="productlist.php?category=57&amp;secondary=72">Grad Dresses 
(2) 
</a>
</li>

<li id="57_79"><a href="productlist.php?category=57&amp;secondary=79">Without Stitches Suits 
(4) 
</a>
</li>
</ul>
</div>
</li>
<li class="has-child">
<a href="javascript:;">Boys Wear</a> 
<div class="left-sub-menu">
<ul class="list">
<li id="60_73"><a href="productlist.php?category=60&amp;secondary=73">Gowns 
(1) 
</a>
</li>
<li id="60_77"><a href="productlist.php?category=60&amp;secondary=77">Readymade suits 
(1) 
</a>
</li>
<li id="60_112"><a href="productlist.php?category=60&amp;secondary=112">Pasmina Suits 
(1) 
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>

这是我的javascript代码，我试图这样做，我自己尝试过，但它正在设置值，但未定义，所以attr id不存储为键，有些东西搞砸了。

$(document).on('click', '.left-menu > li', function() {
let self = $(this);
var subMenu = self.find(".left-sub-menu");
if (subMenu.length == 0) {
return;
}
var list = self.find(".list");
if (subMenu.hasClass('open')) {
subMenu.removeClass('open');
subMenu.height(0);
self.removeClass('opened')
} else {
$('.left-menu > li').removeClass('opened')
$('.left-sub-menu').removeClass('open').height(0);
self.addClass('opened')
subMenu.addClass('open');
let h = list.outerHeight(true);
subMenu.height(h > 250 ? 250 : h);
window.localStorage.setItem($('.left-menu > li').attr('id'),"Open");
}
});

但是我看到它在本地存储

中没有定义有谁能告诉我怎么修理它

感谢

Answer 1

这一行:

window.localStorage.setItem($('.left-menu > li').attr('id'),"Open");

这里，你说的是$('.left-menu > li').attr('id'):

1. 获取所有匹配.left-menu > li
的元素
2. 获取列表中第一个元素的id属性值

第一个匹配.left-menu > li的元素是:

<div class="nav nav-list categories" id="left-side">
<ul class="left-menu">
<li class="has-child">

您应该能够看到，这没有id属性，因此将从.attr('id')调用返回undefined。

您可以考虑为与.left-menu > li匹配的所有元素提供唯一的id属性，然后在将ID保存到localStorage中时引用在单击处理程序中单击的元素。比如:

$(document).on('click', '.left-menu > li', function() {
let self = $(this);
var subMenu = self.find(".left-sub-menu");
if (subMenu.length == 0) {
return;
}
var list = self.find(".list");
if (subMenu.hasClass('open')) {
subMenu.removeClass('open');
subMenu.height(0);
self.removeClass('opened')
} else {
$('.left-menu > li').removeClass('opened')
$('.left-sub-menu').removeClass('open').height(0);
self.addClass('opened')
subMenu.addClass('open');
let h = list.outerHeight(true);
subMenu.height(h > 250 ? 250 : h);

// Console log to confirm working ID for illustrative purposes only,
// since we cannot read localStorage in StackOverflow's sandbox.
console.log(self.attr('id'));
window.localStorage.setItem(self.attr('id'),"Open");
}
});

<script
src="https://code.jquery.com/jquery-3.6.4.min.js"
integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8="
crossorigin="anonymous"></script>
<div class="nav nav-list categories" id="left-side">
<ul class="left-menu">
<li class="has-child" id="item-1">
<a href="javascript:;">Men</a> 
<div class="left-sub-menu">
<ul class="list">
<li id="59_73"><a href="productlist.php?category=59&amp;secondary=73">Gowns 
(1) 
</a>
</li>
<li id="59_77"><a href="productlist.php?category=59&amp;secondary=77">Readymade suits 
(1) 
</a>
</li>

</ul>
</div>
</li>
<li class="has-child" id="item-2">
<a href="javascript:;">Women</a> 
<div class="left-sub-menu">
<ul class="list">
<li id="54_74"><a href="productlist.php?category=54&amp;secondary=74">Blouses 
(2) 
</a>
</li>
<li id="54_76"><a href="productlist.php?category=54&amp;secondary=76">Bridal Lenghas 
(2) 
</a>
</li>
<li id="54_70"><a href="productlist.php?category=54&amp;secondary=70">Fancy Duppata's 
(4) 
</a>
</li>
</ul>
</div>
</li>
<li class="has-child" id="item-3">
<a href="javascript:;">Girls Wear (1 - 12)</a> 
<div class="left-sub-menu">
<ul class="list">
<li id="57_74"><a href="productlist.php?category=57&amp;secondary=74">Blouses 
(2) 
</a>
</li>
<li id="57_76"><a href="productlist.php?category=57&amp;secondary=76">Bridal Lenghas 
(2) 
</a>
</li>
<li id="57_70"><a href="productlist.php?category=57&amp;secondary=70">Fancy Duppata's 
(2) 
</a>
</li>
<li id="57_73"><a href="productlist.php?category=57&amp;secondary=73">Gowns 
(2) 
</a>
</li>
<li id="57_72"><a href="productlist.php?category=57&amp;secondary=72">Grad Dresses 
(2) 
</a>
</li>

<li id="57_79"><a href="productlist.php?category=57&amp;secondary=79">Without Stitches Suits 
(4) 
</a>
</li>
</ul>
</div>
</li>
<li class="has-child" id="item-4">
<a href="javascript:;">Boys Wear</a> 
<div class="left-sub-menu">
<ul class="list">
<li id="60_73"><a href="productlist.php?category=60&amp;secondary=73">Gowns 
(1) 
</a>
</li>
<li id="60_77"><a href="productlist.php?category=60&amp;secondary=77">Readymade suits 
(1) 
</a>
</li>
<li id="60_112"><a href="productlist.php?category=60&amp;secondary=112">Pasmina Suits 
(1) 
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>