有人可以给我一个答案：

Question

我想知道：a。如何使用jQuery在选择背景图像后使用cookie来保存背景图像，非常详细地介绍如何使用jQuery，因为我之前从未有过，或者b。如何使用常规javascript为它设置cookie，我已经有提示和文本的cookie，但图像太复杂了。任何帮助将不胜感激！

＆＃13;

＆＃13;

< script >
  //alert(document.cookie);
  function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    var expires = "expires=" + d.toGMTString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
  }

function getCookie(cname) {
  var name = cname + "=";
  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);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

function checkCookie() {
  var period_one = getCookie("period1");
  var period_two = getCookie("period2");
  var period_three = getCookie("period3");
  var period_four = getCookie("period4");
  var period_five = getCookie("period5");
  var period_six = getCookie("period6");
  var period_seven = getCookie("period7");
  var period_eight = getCookie("period8");
  var period_nine = getCookie("period9");
  if (period_one != "") {
    document.getElementById('period1a').innerHTML = period_one;
    document.getElementById('period1b').innerHTML = period_one;
    //document.getElementById('period1c').innerHTML=period_one;
    document.getElementById('period1d').innerHTML = period_one;
    document.getElementById('period1e').innerHTML = period_one;
    document.getElementById('period1f').innerHTML = period_seven;
    document.getElementById('period1g').innerHTML = period_seven;
    document.getElementById('period1h').innerHTML = period_seven;
    document.getElementById('period1i').innerHTML = period_seven;
    document.getElementById('period1j').innerHTML = period_seven;
    document.getElementById('period1k').innerHTML = period_seven;
  }
  //alert("period one done");
  if (period_two != "") {
    //alert("period 2 cookie");
    document.getElementById('period2a').innerHTML = period_two;
    //document.getElementById('period2b').innerHTML=period_two;
    document.getElementById('period2c').innerHTML = period_two;
    document.getElementById('period2d').innerHTML = period_two;
    document.getElementById('period2e').innerHTML = period_two;
    document.getElementById('period2f').innerHTML = period_seven;
    document.getElementById('period2g').innerHTML = period_seven;
    document.getElementById('period2h').innerHTML = period_seven;
    document.getElementById('period2i').innerHTML = period_seven;
    document.getElementById('period2j').innerHTML = period_seven;
    document.getElementById('period2k').innerHTML = period_seven;
  }
  if (period_three != "") {
    document.getElementById('period3a').innerHTML = period_three;
    document.getElementById('period3b').innerHTML = period_three;
    document.getElementById('period3c').innerHTML = period_three;
    //document.getElementById('period3d').innerHTML=period_three;	
    document.getElementById('period3e').innerHTML = period_three;
    document.getElementById('period3f').innerHTML = period_seven;
    document.getElementById('period3g').innerHTML = period_seven;
    document.getElementById('period3h').innerHTML = period_seven;
    document.getElementById('period3i').innerHTML = period_seven;
    document.getElementById('period3j').innerHTML = period_seven;
    document.getElementById('period3k').innerHTML = period_seven;
  }
  if (period_four != "") {
    //document.getElementById('period4a').innerHTML=period_four;
    document.getElementById('period5b').innerHTML = period_four;
    document.getElementById('period5c').innerHTML = period_four;
    document.getElementById('period5d').innerHTML = period_four;
    document.getElementById('period5e').innerHTML = period_four;
  }
  if (period_five != "") {
    //document.getElementById('period5a').innerHTML=period_five;
    document.getElementById('period5b').innerHTML = period_five;
    //document.getElementById('period5c').innerHTML=period_five;
    document.getElementById('period5d').innerHTML = period_five;
    document.getElementById('period5e').innerHTML = period_five;
    document.getElementById('period5f').innerHTML = period_seven;
    document.getElementById('period5g').innerHTML = period_seven;
    document.getElementById('period5h').innerHTML = period_seven;
    document.getElementById('period5i').innerHTML = period_seven;
    //document.getElementById('period5j').innerHTML=period_seven;	
    document.getElementById('period5k').innerHTML = period_seven;
  }
  if (period_six != "") {
    document.getElementById('period6a').innerHTML = period_six;
    //document.getElementById('period6b').innerHTML=period_six;
    document.getElementById('period6c').innerHTML = period_six;
    //document.getElementById('period6d').innerHTML=period_six;		
    document.getElementById('period6e').innerHTML = period_six;
    document.getElementById('period6f').innerHTML = period_seven;
    document.getElementById('period6g').innerHTML = period_seven;
    document.getElementById('period6h').innerHTML = period_seven;
    document.getElementById('period6i').innerHTML = period_seven;
    //document.getElementById('period6j').innerHTML=period_seven;	
    document.getElementById('period6k').innerHTML = period_seven;
  }
  if (period_seven != "") {
    //document.getElementById('period7a').innerHTML=period_seven;
    document.getElementById('period7b').innerHTML = period_seven;
    document.getElementById('period7c').innerHTML = period_seven;
    //document.getElementById('period7d').innerHTML=period_seven;	
    document.getElementById('period7e').innerHTML = period_seven;
    document.getElementById('period7f').innerHTML = period_seven;
    document.getElementById('period7g').innerHTML = period_seven;
    document.getElementById('period7h').innerHTML = period_seven;
    document.getElementById('period7i').innerHTML = period_seven;
    //document.getElementById('period7j').innerHTML=period_seven;	
    document.getElementById('period7k').innerHTML = period_seven;
  }
  if (period_eight != "") {
    document.getElementById('period8a').innerHTML = period_eight;
    document.getElementById('period8b').innerHTML = period_eight;
    //document.getElementById('period8c').innerHTML=period_eight;
    document.getElementById('period8d').innerHTML = period_eight;
    document.getElementById('period8e').innerHTML = period_eight;
    document.getElementById('period8f').innerHTML = period_eight;
    document.getElementById('period8g').innerHTML = period_eight;
    document.getElementById('period8h').innerHTML = period_eight;
    document.getElementById('period8i').innerHTML = period_eight;
    document.getElementById('period8j').innerHTML = period_eight;
    document.getElementById('period8k').innerHTML = period_eight;
  }
  if (period_nine != "") {
    document.getElementById('period9a').innerHTML = period_nine;
    //document.getElementById('period9b').innerHTML=period_nine;
    document.getElementById('period9c').innerHTML = period_nine;
    document.getElementById('period9d').innerHTML = period_nine;
    document.getElementById('period9e').innerHTML = period_nine;
    document.getElementById('period9f').innerHTML = period_nine;
    document.getElementById('period9g').innerHTML = period_nine;
    document.getElementById('period9h').innerHTML = period_nine;
    document.getElementById('period9i').innerHTML = period_nine;
    document.getElementById('period9j').innerHTML = period_nine;
    document.getElementById('period9k').innerHTML = period_nine;
  }
}

function setClass(class_period) {
    var class_period = class_period;

    dialog();

    function dialog() {
      var class_name = prompt('Which class do you have period ' + class_period + '?');
      if (class_name.length > 15) {
        alert("Please limit the length to 15 characters")
        dialog();
      } else
        var new_class = "period" + class_period;

      //alert(new_class+' '+class_name);
      setCookie(new_class, class_name, 30);
      document.getElementById(new_class + 'a').innerHTML = class_name;
      document.getElementById(new_class + 'b').innerHTML = class_name;
      document.getElementById(new_class + 'c').innerHTML = class_name;
      document.getElementById(new_class + 'd').innerHTML = class_name;
      document.getElementById(new_class + 'e').innerHTML = class_name;
      document.getElementById(new_class + 'f').innerHTML = class_name;
      document.getElementById(new_class + 'g').innerHTML = class_name;
      document.getElementById(new_class + 'h').innerHTML = class_name;
      document.getElementById(new_class + 'i').innerHTML = class_name;
      document.getElementById(new_class + 'j').innerHTML = class_name;
      document.getElementById(new_class + 'k').innerHTML = class_name;
    }
  }
  //function Close1(){
  // document.getElementById('CA').style.display = "none";
  // document.getElementById('CB').style.display = "none";
  // document.getElementById('CC').style.display = "none";
  // document.getElementById('CD').style.display = "none";
  // document.getElementById('CE').style.display = "none";
  // document.getElementById('CF').style.display = "none";
  // document.getElementById('CG').style.display = "none";
  //}
  < /script>
<script type="text/javascript
">
function B1(){
	document.body.style = "
background - color: #ccc;
"
}
function P1(){
	document.body.style = "
background - image: url('https://cce833b91e811adae55f3df28bdf8619568433c8.googledrive.com/host/0BzMImB5PZZJHdGRDeS1rck5JQjg/textures/patterns/light-tile.gif');
"
}
function P2(){
	document.body.style = "
background - image: url('https://cce833b91e811adae55f3df28bdf8619568433c8.googledrive.com/host/0BzMImB5PZZJHdGRDeS1rck5JQjg/textures/patterns/charcoal.gif');
"
}
function P3(){
	document.body.style = "
background - image: url('https://cce833b91e811adae55f3df28bdf8619568433c8.googledrive.com/host/0BzMImB5PZZJHdGRDeS1rck5JQjg/textures/patterns/foundation.gif');
"
}
function P4(){
	document.body.style = "
background - image: url('https://cce833b91e811adae55f3df28bdf8619568433c8.googledrive.com/host/0BzMImB5PZZJHdGRDeS1rck5JQjg/textures/patterns/presence.png');
"
}
function P5(){
	document.body.style = "
background - image: url('https://cce833b91e811adae55f3df28bdf8619568433c8.googledrive.com/host/0BzMImB5PZZJHdGRDeS1rck5JQjg/textures/images/skulls.png');
"
}
function P6(){
	document.body.style = "
background - image: url('https://cce833b91e811adae55f3df28bdf8619568433c8.googledrive.com/host/0BzMImB5PZZJHdGRDeS1rck5JQjg/textures/images/grey_wash_wall.png');
" < /script>

＆＃13;

@charset "utf-8";
.textures1 {
  text-align: center;
  margin: 0 auto;
  width: 35%;
  height: 10%;
}
a {
  text-decoration: none;
  font-size: 35px;
}
#PairOne {
  border: 2px solid gray;
  float: left;
  background-color: #FFF;
  padding: 15px;
  margin-bottom: 25px;
  box-shadow: 5px 5px 5px #888888;
  height: 300px;
  width: 25%;
  margin-left: 5%;
  margin-right: 0%;
  border-radius: 50px;
  background-image: url('https://cce833b91e811adae55f3df28bdf8619568433c8.googledrive.com/host/0BzMImB5PZZJHdGRDeS1rck5JQjg/textures/patterns/light-tile.gif');
}
#PairTwo {
  border: 2px solid gray;
  float: right;
  background-color: #FFF;
  padding: 15px;
  margin-bottom: 25px;
  box-shadow: 5px 5px 5px #888888;
  height: 300px;
  width: 25%;
  margin-right: 5%;
  border-radius: 50px;
  background-image: url('https://cce833b91e811adae55f3df28bdf8619568433c8.googledrive.com/host/0BzMImB5PZZJHdGRDeS1rck5JQjg/textures/patterns/charcoal.gif');
}
#PairThree {
  border: 2px solid gray;
  float: none;
  background-color: #FFF;
  padding: 15px;
  margin-bottom: 25px;
  box-shadow: 5px 5px 5px #888888;
  height: 300px;
  width: 25%;
  border-radius: 50px;
  background-image: url('https://cce833b91e811adae55f3df28bdf8619568433c8.googledrive.com/host/0BzMImB5PZZJHdGRDeS1rck5JQjg/textures/patterns/foundation.gif');
}
#PairFour {
  border: 2px solid gray;
  float: left;
  background-color: #FFF;
  padding: 15px;
  margin-top: auto;
  margin-bottom: 25px;
  box-shadow: 5px 5px 5px #888888;
  height: 300px;
  width: 25%;
  margin-left: 5%;
  border-radius: 50px;
  background-image: url('https://cce833b91e811adae55f3df28bdf8619568433c8.googledrive.com/host/0BzMImB5PZZJHdGRDeS1rck5JQjg/textures/patterns/presence.png');
}
#PairFive {
  border: 2px solid gray;
  float: right;
  background-color: #FFF;
  padding: 15px;
  margin-top: auto;
  margin-bottom: 25px;
  box-shadow: 5px 5px 5px #888888;
  height: 300px;
  width: 25%;
  margin-right: 5%;
  border-radius: 50px;
  background-image: url('https://cce833b91e811adae55f3df28bdf8619568433c8.googledrive.com/host/0BzMImB5PZZJHdGRDeS1rck5JQjg/textures/images/skulls.png');
}
#PairSix {
  border: 2px solid gray;
  background-color: #FFF;
  padding: 15px;
  margin-top: auto;
  margin-bottom: 25px;
  box-shadow: 5px 5px 5px #888888;
  height: 300px;
  width: 25%;
  border-radius: 50px;
  background-image: url('https://cce833b91e811adae55f3df28bdf8619568433c8.googledrive.com/host/0BzMImB5PZZJHdGRDeS1rck5JQjg/textures/images/grey_wash_wall.png');
}
#PairSeven {
  border: 2px solid gray;
  background-color: #FFF;
  padding: 15px;
  margin-top: auto;
  margin-bottom: 25px;
  box-shadow: 5px 5px 5px #888888;
  height: 300px;
  width: 50%;
  -webkit-border-top-left-radius: 2em;
  -webkit-border-top-right-radius: 2em;
  -webkit-border-bottom-right-radius: 5em;
  -webkit-border-bottom-left-radius: 5em;
  background-color: #ccc;
}

＆＃13;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <meta id="viewport" name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>HP Bells</title>
  <link rel="icon" href="https://cce833b91e811adae55f3df28bdf8619568433c8.googledrive.com/host/0BzMImB5PZZJHdGRDeS1rck5JQjg/Bell-icon.png">
  <link href="https://cce833b91e811adae55f3df28bdf8619568433c8.googledrive.com/host/0BzMImB5PZZJHdGRDeS1rck5JQjg/large-device.css" rel="stylesheet" type="text/css">
  <link href="https://cce833b91e811adae55f3df28bdf8619568433c8.googledrive.com/host/0BzMImB5PZZJHdGRDeS1rck5JQjg/small-device.css" rel="stylesheet" type="text/css">
</head>

<body onload="checkCookie()">
  <!--Form start-->
  <div id="form" class="form">
    <div class="period">
      <p style="background-color: #ff0000;" class="button" id="period1e" onclick="setClass(&#39;1&#39;);">1</p>
      <p style="background-color: #ff0000;" class="button" id="period2e" onclick="setClass(&#39;2&#39;);">2</p>
      <p style="background-color: #ff0000;" class="button" id="period3e" onclick="setClass(&#39;3&#39;);">3</p>
      <p style="background-color: #ff0000;" class="button" id="period4e" onclick="setClass(&#39;4&#39;);">4</p>
      <p style="background-color: #ff0000;" class="button" id="period5e" onclick="setClass(&#39;5&#39;);">5</p>
      <p style="background-color: #ff0000;" class="button" id="period6e" onclick="setClass(&#39;6&#39;);">6</p>
      <p style="background-color: #ff0000;" class="button" id="period7e" onclick="setClass(&#39;7&#39;);">7</p>
      <p style="background-color: #ff0000;" class="button" id="period8e" onclick="setClass(&#39;8&#39;);">8</p>
      <p style="background-color: #ff0000;" class="button" id="period9e" onclick="setClass(&#39;9&#39;);">9</p>
    </div>
  </div>
  <!--Form end-->
  <!--End last day-->
  <div id="footer">
    <h1>HP Bells</h1>
    <div class="image-wrapper">
      <img src="https://cce833b91e811adae55f3df28bdf8619568433c8.googledrive.com/host/0BzMImB5PZZJHdGRDeS1rck5JQjg/logo.png" class="scale-image">
    </div>
    <div>
      <!--Textures-->
      <h1>Click to change wallpaper</h1>
      <link href="texture.css" rel="stylesheet" type="text/css" />
      <div id="container">
        <div class="textures1" id="PairOne" onclick="P1(); AB2();">
          <h1>&nbsp;</h1>
        </div>
        <div class="textures1" id="PairTwo" onclick="P2(); AB1();">
          <h1>&nbsp;</h1>
        </div>
        <div class="textures1" id="PairThree" onclick="P3(); AB2();">
          <h1>&nbsp;</h1>
        </div>
        <div class="textures1" id="PairFour" onclick="P4(); AB1();">
          <h1>&nbsp;</h1>
        </div>
        <div class="textures1" id="PairFive" onclick="P5(); AB2();">
          <h1>&nbsp;</h1>
        </div>
        <div class="textures1" id="PairSix" onclick="P6(); AB1();">
          <h1>&nbsp;</h1>
        </div>
        <div class="textures1" id="PairSeven" onclick="B1(); AB2();">
          <h1>&nbsp;</h1>
        </div>
      </div>
      <a href="http://hpregional.org/">High Point's Website</a>
      <!--End textures-->
    </div>
    <!--End footer-->
  </div>
  <!-- end container -->
</body>

</html>

＆＃13;

＆＃13;

＆＃13;

Answer 1

通过＆＃34;保存背景图像＆＃34;，如果您希望将图像存储在用户的浏览器中以便稍后检索，则cookie将无法执行。每个域的Cookie的最大大小为4093 bytes。你可以做的只是存储对图像的引用，所以像图像的URL或文件名，你可以用来确定用户＆＃39;稍后选择。

如果您坚持将图像存储在用户中，浏览器然后使用localStorage代替。您可以查看How to save an image to localStorage and display it on the next page?，了解如何执行此操作。但请记住，localStorage的最大大小为10mb。