Can someone give me an answer for this:

Question

I would like to know either: a. How to use jQuery to use a cookie to save a background image after it is selected, very detailed on how to use jQuery as I never have prior to this, or b. How to use regular javascript to set a cookie for it, I already have cookies for prompts and text in place, but images are getting too complex. Any help will be greatly appreciated!

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

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

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

score 0 · Answer 1 · edited May 23 '17 at 11:44

By "save a background image", if you mean you want to store the image in the user's browser for retrieval later then a cookie will not do. The max size of cookies per domain is 4093 bytes. What you can do instead is just store a reference to the image instead, so something like the URL or the filename of the image, that you can use to determine the users' choice at a later point.

If you insist on storing the image in the users' browser then use localStorage instead. You can check out How to save an image to localStorage and display it on the next page? for an idea on how to do that. Though keep in mind that localStorage has a max size of 10mb.

Can someone give me an answer for this:

1 Answers1