代码之家 › 专栏 › 技术社区 › Beata

jQuery-在页面重新加载后保留添加的onclick css

reload refresh onclick css jquery

Beata · 技术社区 · 7 年前

我通过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;
  }
});

重要的是,访问者不必每次都在我网站上的每个页面/帖子上单击对比度按钮。

7 回复 | 直到 7 年前

Alex Yokisama 7 年前

尝试使用 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。

hiren 7 年前

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

Daniel E. 7 年前

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

您可以使用localstorage(即使在浏览器关闭后)来保存它,也可以使用sessionstorage(在用户关闭浏览器窗口之前保存信息)。

Johannes Piontkowitz 7 年前

你可以使用 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!

Ryuk Lee 7 年前

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

SINGH 7 年前

您可以通过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);
  }

Sriram Jano 7 年前

使用曲奇 :

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