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

【问题标题】：jQuery - keep added onclick css after page reloadjQuery - 页面重新加载后继续添加 onclick css
【发布时间】：2018-08-20 07:10:51
【问题描述】：

我在页面中添加了 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;
  }
});

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

【问题讨论】：

你能告诉我们所有的东西吗（html等）
@Beata 我已经与 cookie 共享了解决方案，请检查我的答案..这将适用于重新加载条件。如果您有任何问题，请告诉我。

标签： jquery css onclick refresh reload

【解决方案1】：

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

【讨论】：

【解决方案2】：

尝试为此使用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);
});

注意：这不会保存浏览器重启的结果。如果您想要长期解决方案，请使用 DB 或 cookie。

【讨论】：

【解决方案3】：

最好的方法是使用 Session Storage ： https://www.w3schools.com/html/html5_webstorage.asp

您可以使用 localstorage 来保留它，即使在浏览器关闭后也可以保留它，也可以使用 sessionstorage 来保留信息，直到用户关闭浏览器窗口。

【讨论】：

【解决方案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!

【讨论】：

【解决方案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);
  }
});

【讨论】：

【解决方案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);
  }

【讨论】：

@Beata 本地存储在您重新加载页面时不会为您提供帮助，但这对您有用，或者如果您想在服务器端或从 db 执行此操作，您可以使用会话进行管理。如果对您有帮助，请告诉我。

【解决方案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>

【讨论】：