jQuery-页面重新加载后继续添加onclick CSS [英] jQuery - keep added onclick css after page reload

问题描述

我在页面上添加了jQuery的css，以使访问者可以通过单击按钮来更改对比度.

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

但是我想在重新加载页面后保持CSS处于活动状态(当已经单击对比度按钮时).我希望有可能，因为我还没有找到任何解决方案.

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.

我的代码:

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.

推荐答案

为此目的尝试使用 localStorage .

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

注意:这不会保存结果以供浏览器重新启动.如果需要长期解决方案，请使用数据库或cookie.

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

这篇关于jQuery-页面重新加载后继续添加onclick CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！