Question

我的网站上有一个按钮，可以使用jQuery切换元素的可见性。

如何将此元素的状态存储在cookie或本地存储中？因此，当用户下次访问该站点时会记住它。我不想使用jQuery插件。

此外，我想在按钮点击上添加一个参数，如?title=0，其中数字代表元素的当前状态，状态也可以这种方式控制。

以下是一个例子：

$('#hide').click(function(){
  $('h1').toggleClass('hidden');
  $(this).text() == 'Hide title' ?
    $(this).text('Show title') :
    $(this).text('Hide title');
});

.hidden {
    visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<button id="hide">Hide title</button>
<h1>Title</h1>

Answer 1

注意，在stacksnippets未经测试，不允许使用localStorage

尝试使用$.holdReady()，localStorage

$.holdReady(true);   
// hide title
if (location.search === "?title=0") {
  if (!localStorage.getItem("title"))   {
    localStorage.setItem("title","0");  
  } else {
    localStorage.setItem("title","0");  
  }
  $("#hide").text("Show title");
  $("h1").addClass("hidden");
  // location.search = "?title=0";
}
// show title
if (location.search === "?title=1") {
  if (!localStorage.getItem("title"))   {
    localStorage.setItem("title","1");  
  } else {
    localStorage.setItem("title","1");  
  }
  $("#hide").text("Hide title");
  $("h1").removeClass("hidden");
  // location.search = "?title=1"
}    
$.holdReady(false);
$(document).ready(function() {
    $('#hide').click(function() {
      $('h1').toggleClass('hidden');
      $(this).text() == 'Hide title' ?
        $(this).text('Show title') && localStorage.setItem("title", "0") :
        $(this).text('Hide title') && localStorage.setItem("title", "1");
    });
    location.search = "?title=" + localStorage.getItem("title");
});

另见Global Variable usage on page reload

使用按钮切换URL参数

1 个答案: