jQuery

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

重要的是，访问者不必在我网站上的每个 pages/posts 上每次都点击对比按钮。

Answer 1

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

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

注意：这不会保存浏览器重启的结果。如果你想要 long-term 解决方案，请使用 DB 或 cookies。

Answer 3

最好的方法是使用会话存储： https://www.w3schools.com/html/html5_webstorage.asp

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

Answer 4

您可以使用 HTML5 Local Storage 来实现这一点。它的作用是保存数据 client-sided，您可以在每次页面加载时检索这些数据（例如您的 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

jQuery - keep added onclick css after page reload

css

refresh

onclick

reload