我正在使用Bootstrap Sb-Admin Template，我想使用jquery cookie来记住导航栏的切换状态。
问题是当重新加载页面时忘记了切换状态。我想使用js-cookie来记住最后一个切换状态（折叠或不折叠）。如何使用此cookie记住状态？
// Toggle the side navigation
$("#sidenavToggler").click(function(e) {
e.preventDefault();
$("body").toggleClass("sidenav-toggled");
$(".navbar-sidenav .nav-link-collapse").addClass("collapsed");
$(".navbar-sidenav .sidenav-second-level, .navbar-sidenav .sidenav-third-level").removeClass("show");
});
// Force the toggled class to be removed when a collapsible nav link is clicked
$(".navbar-sidenav .nav-link-collapse").click(function(e) {
e.preventDefault();
$("body").removeClass("sidenav-toggled");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
<a class="navbar-brand" href="/">START <b>Q</b>UANTUM</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav navbar-sidenav" id="exampleAccordion">
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Dashboard">
<a class="nav-link" href="/?page_id=1">
<i class="fa fa-fw fa-dashboard"></i>
<span class="nav-link-text">Dashboard</span>
</a>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Dashboard">
<a class="nav-link" href="/social/?page_id=2">
<i class="fa fa-fw fa-share-square-o"></i>
<span class="nav-link-text">Social Book</span>
</a>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Charts">
<a class="nav-link" href="/attendance/?page_id=3" title="See Everything About Your Attendance">
<i class="fa fa-fw fa-area-chart"></i>
<span class="nav-link-text">Attendance</span>
</a>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Tables">
<a class="nav-link" href="/attendance/leave-data.php?page_id=4" title="Know about your leaves">
<i class="fa fa-fw fa-table"></i>
<span class="nav-link-text">Leave / Day Off</span>
</a>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Menu Levels">
<a class="nav-link" href="/payroll/?page_id=5" data-parent="#exampleAccordion">
<i class="fa fa-fw fa-money"></i>
<span class="nav-link-text">Payroll</span>
</a>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Components">
<a class="nav-link nav-link-collapse collapsed" data-toggle="collapse" href="#collapseComponents" data-parent="#exampleAccordion">
<i class="fa fa-fw fa-sitemap"></i>
<span class="nav-link-text">Subordinates</span>
</a>
<ul class="sidenav-second-level collapse" id="collapseComponents">
<li>
<a href="/subordinates/pendency.php?page_id=6">Approval</a>
</li>
<li>
<a href="/subordinates/report_to_me.php?page_id=7">Under You</a>
</li>
</ul>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Example Pages">
<a class="nav-link nav-link-collapse collapsed" data-toggle="collapse" href="#collapseExamplePages" data-parent="#exampleAccordion">
<i class="fa fa-fw fa-wrench"></i>
<span class="nav-link-text">Settings</span>
</a>
<ul class="sidenav-second-level collapse" id="collapseExamplePages">
<li>
<a href="/settings/profile.php?page_id=8">General Profile</a>
</li>
<li>
<a href="/settings/settings.php?page_id=9">Security Settings</a>
</li>
<li>
<a href="blank.html">Blank Page</a>
</li>
</ul>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Link">
<a class="nav-link" href="/reports/?page_id=10">
<i class="fa fa-fw fa-file"></i>
<span class="nav-link-text">Reports</span>
</a>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="HR-ADMIN Special Panel">
<a class="nav-link special" href="/settings/hr-admin.php?page_id=11">
<i class="fa fa-fw fa-link"></i>
<span class="nav-link-text">HR - ADMIN</span>
</a>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="HR-ADMIN Special Panel">
<a class="nav-link special" href="/control/?page_id=11">
<i class="fa fa-cogs" aria-hidden="true"></i>
<span class="nav-link-text">Configuration</span>
</a>
</li>
</ul>
<ul class="navbar-nav sidenav-toggler">
<li class="nav-item">
<a class="nav-link text-center" id="sidenavToggler">
<i class="fa fa-fw fa-angle-left"></i>
</a>
</li>
</ul>
</div>
</nav>
如何记住toogle状态？
答案 0 :(得分：1)
因此。你有一些切换，你可以使用localStorage来保存他们的值。根据它们的数量，您应该保存或者每个切换包含少量值的一个值或对象。然后，您需要通过按钮或onChange保存到localStorage。在加载页面时，您需要检索数据。
有一个例子https://codepen.io/CrUsH20/pen/aEWPKe?editors=1010
如果需要多个切换保存，您应该组织数据收集，然后将其转换为对象和JSON。并通过转换JSON检索数据。但是俄语中有一个例子https://codepen.io/CrUsH20/pen/oBXaJR。
<label>Numer 1
<input onclick="update()" name="test" value="1" type="radio">
</label>
<label>Numer 2
<input onclick="update()" name="test" value="2" type="radio">
</label>
<label>Numer 3
<input onclick="update()" name="test" value="3" type="radio">
</label>
<button onclick="save()">Save</button>
JS
let current = null;
window.onload = () => {
let checked = localStorage.getItem("checked") || 1;
console.log('It works!\n\n'+checked);
if (checked) {
document.querySelector('input[value="'+checked+'"]').checked = true;
}
current = document.querySelector('input:checked').value;
}
function update() {
current = document.querySelector('input:checked').value;
console.log(current);
}
function save() {
localStorage.setItem("checked", current);
}
答案 1 :(得分：0)
您应该使用localStorage。例如：
localStorage.setItem('toggled', 'true');
要恢复状态 - 即使在重新加载页面后 - 您也可以使用：
localStorage.getItem('toggled'); // true
为什么选择localStorage？
Cookie和本地存储有不同的用途。 Cookie主要用于读取服务器端，本地存储只能由客户端读取。所以问题是，在你的应用中，谁需要这些数据 - 客户端还是服务器？
请参阅this帖子。
由于您需要切换状态以进行渲染，因此您需要使用localStorage。