[英]Can someone give me an answer for this:
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.
选中后如何使用jQuery来使用cookie来保存背景图像,关于如何使用jQuery的细节非常详细,这是我之前从未见过的,或者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.
如何使用常规的javascript为其设置cookie,我已经有用于提示和文本的cookie,但是图像变得太复杂了。 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('1');">1</p> <p style="background-color: #ff0000;" class="button" id="period2e" onclick="setClass('2');">2</p> <p style="background-color: #ff0000;" class="button" id="period3e" onclick="setClass('3');">3</p> <p style="background-color: #ff0000;" class="button" id="period4e" onclick="setClass('4');">4</p> <p style="background-color: #ff0000;" class="button" id="period5e" onclick="setClass('5');">5</p> <p style="background-color: #ff0000;" class="button" id="period6e" onclick="setClass('6');">6</p> <p style="background-color: #ff0000;" class="button" id="period7e" onclick="setClass('7');">7</p> <p style="background-color: #ff0000;" class="button" id="period8e" onclick="setClass('8');">8</p> <p style="background-color: #ff0000;" class="button" id="period9e" onclick="setClass('9');">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> </h1> </div> <div class="textures1" id="PairTwo" onclick="P2(); AB1();"> <h1> </h1> </div> <div class="textures1" id="PairThree" onclick="P3(); AB2();"> <h1> </h1> </div> <div class="textures1" id="PairFour" onclick="P4(); AB1();"> <h1> </h1> </div> <div class="textures1" id="PairFive" onclick="P5(); AB2();"> <h1> </h1> </div> <div class="textures1" id="PairSix" onclick="P6(); AB1();"> <h1> </h1> </div> <div class="textures1" id="PairSeven" onclick="B1(); AB2();"> <h1> </h1> </div> </div> <a href="http://hpregional.org/">High Point's Website</a> <!--End textures--> </div> <!--End footer--> </div> <!-- end container --> </body> </html>
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. 通过“保存背景图像”,如果您想将图像存储在用户的浏览器中以供以后检索,则cookie不会起作用。 The max size of cookies per domain is 4093 bytes .
每个域的Cookie的最大大小为4093字节 。 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.
相反,您可以做的只是存储对图像的引用,因此可以使用诸如URL或图像的文件名之类的东西来稍后确定用户的选择。
If you insist on storing the image in the users' browser then use localStorage instead. 如果您坚持将图像存储在用户的浏览器中,请改用localStorage 。 You can check out How to save an image to localStorage and display it on the next page?
您可以查看如何将映像保存到localStorage并将其显示在下一页上? for an idea on how to do that.
对于如何做到这一点的想法。 Though keep in mind that localStorage has a max size of
10mb
. 但是请记住,localStorage的最大大小为
10mb
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.