Javascript:添加CSS类并保存到cookie中

Question

不幸的是，我是Javascript的新手，需要你的帮助和知识。

案件：

我试图开发一个“对比改变”，以使Wordpress网站更多可用，并覆盖视力混乱的用户以及。

现在，我需要将最新的CSS类保存到cookie中，并将其加载回。

在这种情况下，对比设置将保存和可用，在单击链接或重新加载页面，我不知道如何解决这个问题。

我感谢大家提出的意见和建议。

参见CodePen：https://codepen.io/matt-prime/pen/abzGEoY上的完整片段

​

// CONTRAST CHANGER
$(document).ready(function(){

 
  // CONTRAST DEFAULT
  $(".change-reset").click(function(){
    $("*").removeClass("contrast-black-white contrast-white-black contrast-yellow-blue contrast-blue-yellow");
  });

  // CONTRAST BLACK WHITE
  $(".changeBW").click(function(){
    $("*").removeClass("contrast-black-white contrast-white-black contrast-yellow-blue contrast-blue-yellow");
    $("*").addClass("contrast-black-white");
  });

  // CONTRAST WHITE BLACK
  $(".changeWB").click(function(){
    $("*").removeClass("contrast-black-white contrast-white-black contrast-yellow-blue contrast-blue-yellow");
    $("*").addClass("contrast-white-black");
    $(".toolbar").removeClass("contrast-white-black");
  });

  // CONTRAST YELLOW BLUE
  $(".changeYB").click(function(){
    $("*").removeClass("contrast-black-white contrast-white-black contrast-yellow-blue contrast-blue-yellow");
    $("*").addClass("contrast-yellow-blue");
    $(".toolbar").removeClass("contrast-yellow-blue");
  });

  // CONTRAST BLUE YELLOW
  $(".changeBY").click(function(){
    $("*").removeClass("contrast-black-white contrast-white-black contrast-yellow-blue contrast-blue-yellow");
    $("*").addClass("contrast-blue-yellow");
    $(".toolbar").removeClass("contrast-blue-yellow");
  });
  
})

* {box-sizing: border-box;}

body {
  margin: 0 !important;
  font-size:16px !important;
  background-color: burlywood !important;
}
/*******************************************************/
/**                Sizes based on:                    **/
/** The Markup Language (an HTML language reference)  **/
/**         W3C Working Group Note 28, May 2013       **/
/**           https://www.w3.org/TR/html/             **/
/*******************************************************/

h1 {
/* TEST */
  padding: 1em 2em;
  border: 0.2em solid;
  text-align: center;
/* TEST END */

  font-size: 2em !important;
  line-height: 2.34em !important;

}

h2 {
  font-size: 1.5em !important;
  margin: 1.2450em !important;
  line-height: 1.74em !important;
}

h3 {
  font-size: 1.17em !important;
  margin: 1.1699em !important;
  line-height: 1.41em !important;
}

h4 {
  font-size: 1em !important;
  margin: 1.3300em !important;
  line-height: 1.2em !important;
}

h5 {
  font-size: 0.83em !important;
  margin: 1.3860em !important;
  line-height: 0.92em !important;
}

h6 {
  font-size: 0.67em !important;
  margin: 1.5611em !important;
  line-height: 0.76em !important;
}

p {
  font-size: 1em !important;
  margin: 1em !important;
  line-height: 1.2em !important;
}


 ul {
   font-size: 1em !important;
   margin: 1em !important; 
   line-height: 1.2em !important;
 }

 li {
   font-size: 1em !important;
   margin: 0em !important;
   line-height: 1.2em !important;
 }

 table, td {
   font-size: 1em !important;
   margin: 0em !important;
   line-height: 1.2em !important;
 }

 pre {
   font-size: 0.8125em !important;
   margin: 0.8125em !important;
   line-height: 0.92em !important;
 }

 div,
 section {
   font-size: 1em !important;
   margin: 0em !important; 
   line-height: 1.2em !important;
}

 input,
 button {
   font-size: 0.6879em !important;
   margin: 0.125em !important;
   line-height: 0.8125em !important;
}

.toolbar {
  background:#0B0B61;
  border-bottom:1px solid;
  
/* overflow:hidden; */
/* font-size:1.8em; */

}

a.toolbar:hover,
a.toolbar:focus {background:orange !important;}

.icon {
  padding-right:0.5em;
}

nav {
	margin: 0px auto;
	display: inline-block;
}

.content,
section {
  max-width:1080px;
  padding: 1em;
  margin:0 auto;
}

.left {float:left;}

.dropdown-menu {
	background-color: #0B0B61 !important;
  color: white !important;
	/* border: 1px solid #ccc; */
	border: 1px solid rgba(0,0,0,0.15);
	border-radius: 0 0 4px 4px !important;
	-webkit-box-shadow: 0 6px 12px rgba(0,0,0,0.175);
	box-shadow: 0 6px 12px rgba(0,0,0,0.175);
	background-clip: padding-box;
  margin-top: 0px !important;
  padding: 7px 0 !important;
  margin-left: 0 !important;
}

.dropdown-menu > li > a {
	display: block;
	padding: 0.5em 0.9em !important;
	clear: both;
	font-weight: normal;
  font-size: 1.2em;
  line-height: 1.428571429;
	/* color: white !important; */
	white-space: nowrap;
  cursor: pointer;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
  text-transform: none;

}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
	text-decoration: none;
}

.btn {
  font-size: 1.2em !important;
}

.btn-label {

}

.btn-default::after {
	content: "⯆";
	display: inline-block;
}

.btn-default {
	color: white !important; 
	background-color: #0B0B61 !important;
	border-color: white !important;
  border-radius: 0 !important;
  border:0 !important;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
}

.btn-default:hover,
.btn-default:focus {
  color: white !important;
  background-color: orange !important;
  border-left: :1px solid #0B0B61 !important;
  border-right: :1px solid #0B0B61 !important;
}

/** CSS CLASSES CONTRAST SUBMENU **/
/* CONTRAST BUTTON DEFAULT */
.contrast-default {color: white !important;}
.contrast-default:hover,
.contrast-default:focus,
.contrast-default:active {
  background-color: orange!important;
  border-color: white!important;
  color:white!important;
  
}

/* CONTRAST BUTTON BLACK WHITE */
.contrast-sw {color: white !important;}
.contrast-sw:hover,
.contrast-sw:focus,
.contrast-sw:active {
  background-color: white!important;
  border-color: black!important;
  color:black!important;
}

/* CONTRAST BUTTON WHITE BLACK */
.contrast-ws {color: white !important;}
.contrast-ws:hover,
.contrast-ws:focus,
.contrast-ws:active {
  background-color: black!important;
  border-color: white!important;
  color:white!important;
}

/* CONTRAST BUTTON YELLOW BLUE */


.contrast-gb {color: white !important;}
.contrast-gb:hover,
.contrast-gb:focus,
.contrast-gb:active {
  background-color: #003AFF!important;
  border-color: #FFFA06!important;
  color:#FFFA06!important;
  /* font-weight: bold; */
}


/* CONTRAST BUTTON BLUE YELLOW */


.contrast-bg {color: white !important;}
.contrast-bg:hover,
.contrast-bg:focus,
.contrast-bg:active {
  background-color: #FFFA06!important;
  border-color: #003AFF!important;
  color:#003AFF!important;
}

/** CSS CLASS CONTRAST SUBMENU BUTTON END **/

/** CSS CLASS CONTRAST LAYOUT **/

/* CONTRAST LAYOUT BLACK WHITE */
.contrast-black-white {
  background-color: white!important;
  border-color: black!important;
  color:black!important;
}

/* CONTRAST LAYOUT WHITE BLACK */
.contrast-white-black {
  background-color: black!important;
  border-color: white!important;
  color:white!important;
  }

/* CONTRAST LAYOUT YELLOW BLUE */
.contrast-yellow-blue {
  background-color: #003AFF!important;
  border-color: #FFFA06!important;
  color:#FFFA06!important;
}

/* CONTRAST LAYOUT BLUE YELLOW */
.contrast-blue-yellow {
  background-color: #FFFA06!important;
  border-color: #003AFF!important;
  color:#003AFF!important;
}
/** CSS CLASS CONTRAST LAYOUT END **/

<html>

<head>
  <title>Contrast Changer</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" integrity="sha384-3AB7yXWz4OeoZcPbieVW64vVXEwADiYyAEhwilzWsLw+9FgqpyjjStpPnpBO8o8S" crossorigin="anonymous">
  <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</head>

  <body>
    <div class="toolbar" role="none">
      <nav role="navigation">
        <div class="btn-group">
          <button title="Contrast"class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            <i class="icon fas fa-adjust"></i>
            <span class="btn-label">Contrast</span>
          </button>
          <ul class="dropdown-menu" role="menu">
            
            <li>
              <a aria-label="Contrast Reset" href="#" class="change-reset contrast-default">Reset</a>
            </li>
            <li>
              <a aria-label="Contrast Black White" href="#" class="changeBW contrast-sw">Black / White</a>
            </li>
            <li>
              <a aria-label="Contrast White Black" href="#" class="changeWB contrast-ws">White / Black</a>
            </li>
            <li>
              <a aria-label="Contrast Yellow Blue" href="#" class="changeYB contrast-gb">Yellow / Blue</a>
            </li>
            <li>
              <a aria-label="Contrast Blue Yellow" href="#" class="changeBY contrast-bg">Blue / Yellow</a>
            </li>
          </ul>
        </div>
      </nav>
    </div>
    
    <div class="a11y">
      <section class="content" role="main">
        <h1>Heading 1</h1>
        <h2>Heading 2</h2>
        <h3>Heading 3</h3>
        <h4>Heading 4</h4>
        <h5>Heading 5</h5>
        <h6>Heading 6</h6>
        <p strong>Paragraph</p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p>
      </section>
    </div>
  </body>

​

Answer 1

通过使用document.cookie (如前所述) 这里

codepen上的工作演示：https://codepen.io/Rockingpg0/pen/GRgddgb

Answer 2

使用这两个cookie函数来设置和获取cookie。在setCookie()函数中，我设置了90天的到期时间(以msec.为单位)，您可以根据网站的最佳值来更改它。

function setCookie(cookieName, cookieValue) {
  var d = new Date();
  d.setTime(d.getTime() + (90 * 24 * 60 * 60 * 1000)); // 90 days
  document.cookie = cookieName + "=" + cookieValue + ";expires=" + d.toUTCString() + ";path=/";
}

function getCookie(cookieName) {
  var name = cookieName + "=";
  var i, c, ca = document.cookie.split(';');
  for(i = 0; i < ca.length; i++) {
    c = ca[i];
    while (c.charAt(0) == ' ') c = c.substring(1);
    if (c.indexOf(name)  == 0) return c.substring(name.length, c.length);
  }
  return "";
}

// how to get the cookie
var cValue = getCookie("contrast");
if (cValue == "") {
  // cookie not set yet
} else {
  // cookie in variable cValue
}

// how to set the cookie
setCookie("contrast", "contrast-blue-yellow");