有人可以给我答案吗？

Question

我想知道： 选中后如何使用jQuery来使用cookie来保存背景图像，关于如何使用jQuery的细节非常详细，这是我之前从未见过的，或者b。 如何使用常规的javascript为其设置cookie，我已经有用于提示和文本的cookie，但是图像变得太复杂了。 任何帮助将不胜感激！

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

Answer 1

通过“保存背景图像”，如果您想将图像存储在用户的浏览器中以供以后检索，则cookie不会起作用。 每个域的Cookie的最大大小为4093字节 。 相反，您可以做的只是存储对图像的引用，因此可以使用诸如URL或图像的文件名之类的东西来稍后确定用户的选择。

如果您坚持将图像存储在用户的浏览器中，请改用localStorage 。 您可以查看如何将映像保存到localStorage并将其显示在下一页上？ 对于如何做到这一点的想法。 但是请记住，localStorage的最大大小为10mb 。