jQuery - keep added onclick css after page reload

问题

I added css by jQuery to my page to enable visitors changing the contrast by clicking button.

But I would like to keep css active after reloading the page (when contrast button is already clicked). I hope it is possible, because I didn't find any solution yet.

My code:

var applied = false;

$('.contrast-on').click(function() {
  if (!applied) {
    $('*').css('background-color', 'rgb(0, 0, 0)').css('color', 'rgb(255, 255, 255)').css('background-image', 'none');
    applied = true;
  } else {
    $('*').css('background-color', '').css('color', '').css('background-image', '');
    applied = false;
  }
});

It is important that visitor will not have to click contrast button every time on every pages/posts on my site.

回答1:

Try to use localStorage for this purpose.

var applied = localStorage.getItem("applied") == "true";
if (applied) {
  $('*').css('background-color', 'rgb(0, 0, 0)').css('color', 'rgb(255, 255, 255)').css('background-image', 'none');  
} else {
  $('*').css('background-color', '').css('color', '').css('background-image', '');
}

$('.contrast-on').click(function() {
  if (!applied) {
    $('*').css('background-color', 'rgb(0, 0, 0)').css('color', 'rgb(255, 255, 255)').css('background-image', 'none');
    applied = true;    
  } else {
    $('*').css('background-color', '').css('color', '').css('background-image', '');
    applied = false;
  }
  localStorage.setItem("applied", applied);
});

Note: this will not save result for browser restart. If you want long-term solution, use DB or cookies.

回答2:

As you have defined var applied = false;, every time you reload the page your variable will be reset to value false. To achieve what you mentioned you have to get this variable from database or your server side code and read the value of the variable for given user (i.e using ajax call) on page load.

回答3:

The best way to do this would be to use Session Storage : https://www.w3schools.com/html/html5_webstorage.asp

You can use either localstorage to keep it even after the browser is closed or sessionstorage which keep infos until user closes the browser window.

回答4:

You could use HTML5 Local Storage to achieve this. What this does is save data client-sided, which you can retrieve on every page load (e.g. your document.ready function).

You could do something like:

$('#yourButton').click(function(){
    localStorage.setItem("contrast", "your-css-class");
});

and on page load:

$(document).ready(function(){
    $(".element-your-css-should-be-applied-to").addClass(localStorage.getItem("contrast"));
})

See this fiddle to try it out!

回答5:

Use css is better

.contrast-on-clicked{
    background-color : rgb(0, 0, 0);
    color : rgb(255, 255, 255);    
}

edit js

$('.contrast-on').click(function() {
  var applied = localStorage.getItem("contrast-clicked");
  if (applied != "true") {
    $('*').addClass('contrast-on-clicked');
    localStorage.setItem("contrast-clicked",true);
  } else {
    $('*').removeClass('contrast-on-clicked');
    localStorage.setItem("contrast-clicked",false);
  }
});

回答6:

You can achieve this by cookie. as below

$(document).ready(function() {

    var applied = false;
    var isContrastOn = readCookie('is_contrast_on');
    if (isContrastOn) {
      $('*').css('background-color', 'rgb(0, 0, 0)').css('color', 'rgb(255, 255, 255)').css('background-image', 'none');
    }
    $('.contrast-on').click(function() {
      if (!applied) {
        createCookie("is_contrast_on", 1);
        $('*').css('background-color', 'rgb(0, 0, 0)').css('color', 'rgb(255, 255, 255)').css('background-image', 'none');
        applied = true;
      } else {
        $('*').css('background-color', '').css('color', '').css('background-image', '');
        applied = false;
      }
    });
  })
  function createCookie(name, value, days) {
    if (days) {
      var date = new Date();
      date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
      var expires = "; expires=" + date.toUTCString();
    }
    else
      var expires = "";
    document.cookie = name + "=" + value + expires + "; path=/";
  }

  function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
      var c = ca[i];
      while (c.charAt(0) == ' ')
        c = c.substring(1, c.length);
      if (c.indexOf(nameEQ) == 0)
        return c.substring(nameEQ.length, c.length);
    }
    return null;
  }

  function eraseCookie(name) {
    createCookie(name, "", -1);
  }

回答7:

Use Cookie :

<script type="text/javascript">
var applied = false;
var visited = getCookie("visited");
if (visited==1) {
    $('.contrast-on').css('background-color', 'rgb(0, 0, 0)').css('color', 'rgb(255, 255, 255)').css('background-image', 'none');
}

$('.contrast-on').click(function() {
    if (! applied) {
        $('*').css('background-color', 'rgb(0, 0, 0)').css('color', 'rgb(255, 255, 255)').css('background-image', 'none');
        applied = true;
        setCookie("visited", 1, 365);
    } else {
    $('*').css('background-color', '').css('color', '').css('background-image', '');
        applied = false;
        setCookie("visited", "", -1);
    }
});

function setCookie(name,value,days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days*24*60*60*1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
}

function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}


</script>

来源：https://stackoverflow.com/questions/49232283/jquery-keep-added-onclick-css-after-page-reload