Toggle URL parameter with button

Question

I have a button on my website that toggles the visibility of an element with jQuery.

How can I store the state of this element in a cookie or local storage? So it is remembered when the user visits the site the next time. I wouldn't like to use jQuery plugins.

Also I would like to add a parameter to the url on button click like ?title=0 where the number would represent the current state of the element, and the state would be also controllable this way.

Here is an example:

$('#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>

Community · Accepted Answer · 2017-05-23 12:29:50Z

2

Note, untested at stacksnippets , which does not allow use of localStorage

Try utilizing $.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");
});

See also Global Variable usage on page reload

edited May 23, 2017 at 12:29

CommunityBot

11 silver badge

answered Aug 1, 2015 at 20:44

guest271314

1

Sign up to request clarification or add additional context in comments.

11 Comments

guest271314 Over a year ago

@Lilferi Try removing first two lines, which were included to set initial title?=0 before any click event . What is purpose of adding parameter "?title=*" to url ?

guest271314 Over a year ago

@Lilferi Try setting url as variable ; e.g., var url = "/path/to/url" , substituting location.href = url + "?title" + localStorage.getItem("title") for location.href = location.href + "?title" + localStorage.getItem("title")

guest271314 Over a year ago

@Lilferi What is purpose of adding parameter "?title=*" to url ?

guest271314 Over a year ago

@Lilferi "So you can create a link to the page with the titles turned on or off" Try utilizing $.holdReady , $(document).ready(fn) pattern described at stackoverflow.com/a/30144363 if expected result is to open link with url parameter . Changing location.href without callback would perhaps reference original html loaded , not changes made to html within click event

guest271314 Over a year ago

"ISee updated post. see it, thank you very much. Now for some reason, the site just keeps refreshing. " Yes, this appeared to be expected result by changing location.href at each page load , click ? See updated post

|

Collectives™ on Stack Overflow

Toggle URL parameter with button

1 Answer 1

11 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related