使用 Jquery cookie 存储 div 的切换状态？

Question

我正在使用 Bootstrap Sb-Admin 模板，并且我想使用 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>&nbsp;
            <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>

如何记住togle状态？

Answer 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);
}

Answer 2

您应该使用localStorage。示例：

localStorage.setItem('toggled', 'true');

要恢复状态 - 即使在页面重新加载后 - 您可以使用：

localStorage.getItem('toggled'); // true

为什么选择 localStorage？

Cookie 和本地存储有不同的用途。 Cookies主要用于读取服务器端，本地存储只能由客户端读取。所以问题是，在您的应用中，谁需要这些数据——客户端还是服务器？

请参阅this 帖子。

由于您需要切换状态来进行渲染，因此您需要使用 localStorage。