Question

我通过jQuery将css添加到我的页面，以便访问者通过单击按钮来更改对比度。

但是我想在重新加载页面后保持css活动（当已经点击对比度按钮时）。我希望有可能，因为我还没有找到任何解决方案。

我的代码：

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

访问者不必每次都在我网站上的每个页面/帖子上点击对比度按钮，这一点非常重要。

Answer 1

尝试将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。

Answer 2

由于您已定义var applied = false;，因此每次重新加载页面时，您的变量都会重置为值false。要实现您提到的内容，您必须从数据库或服务器端代码获取此变量，并在页面加载时读取给定用户的变量值（即使用ajax调用）。

Answer 3

执行此操作的最佳方法是使用会话存储： https://www.w3schools.com/html/html5_webstorage.asp

即使在浏览器关闭后，您也可以使用localstorage来保留它，或者在用户关闭浏览器窗口之前保留信息的sessionstorage。

Answer 4

您可以使用HTML5 Local Storage来实现此目的。这样做可以保存客户端数据，您可以在每次加载页面时检索数据（例如document.ready function）。

您可以执行以下操作：

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

和页面加载：

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

请参阅this fiddle to try it out!

Answer 5

使用css更好

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

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

Answer 6

您可以通过cookie实现此目的。如下

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

Answer 7

使用 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>

jQuery - 在页面重新加载后继续添加onclick css

7 个答案: