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>

score 2 · Accepted Answer · edited May 23 '17 at 12:29

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 '17 at 12:29

Community

1
1

answered Aug 01 '15 at 20:44

guest271314

1
15
104
177

Thank you for your help! I thought this would work, but this way my site just keeps adding `?title=0` to the URL again and again without me doing anything. – Lilferi Aug 01 '15 at 20:59
1

@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 Aug 01 '15 at 21:03
Well, now it stopped keeping adding the parameter, but this way the state is not remembered. The page just reloads and after 3 clicks the url is like `url?title=1?title=1?title=1` – Lilferi Aug 01 '15 at 21:06
1

@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 Aug 01 '15 at 21:09
Now it is not adding multiple times, however the state is still not saved for some reason, the page just reloads and the title shows again. See it here: http://www.szellms.hu/keprejtvenyek (press the button that says Megfejtés nélkül). The script is just before the closing body tag. – Lilferi Aug 01 '15 at 21:16
1

@Lilferi What is purpose of adding parameter "?title=*" to url ? – guest271314 Aug 01 '15 at 21:25
So you can create a link to the page with the titles turned on or off, like you can skip to a specific time in a YouTube video by adding `?t=30` – Lilferi Aug 01 '15 at 21:34
1

@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 http://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 Aug 01 '15 at 21:42
Thank you very much for your continuous help @guest271314, I really appreciate it! You can see on the page I previously linked that unfortunately, for some reason, it's still not working properly. The button changes the element's class, but doesn't seem to update the value of "title" in local storage, and doesn't give `?title=0` to the url. If I manually add `?title=0` to the url, the text of the button changes but the element's class doesn't update. Quite strange. – Lilferi Aug 01 '15 at 22:37
I see it, thank you very much. Now for some reason, the site just keeps refreshing. – Lilferi Aug 01 '15 at 22:55
1

_"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 – guest271314 Aug 01 '15 at 22:57

Toggle URL parameter with button

1 Answers1

Linked