在网页中使用javascript中的cookie保存用户选择的背景图像

Save user chosen background image using cookies in javascript across webpages

本文关键字：用户 保存 选择 图像 背景 cookie 中的 网页 javascript      更新时间：2023-09-26

好的，所以我试图用cookie保存这个函数，但我似乎无法让cookie与函数交互。

var backImage = new Array(); 
backImage[0] = "dotPattern.png";
backImage[1] = "stripesPattern.png";
backImage[2] = "boxPattern.png";
backImage[3] = "";
function changeBGImage(whichImage){
    document.body.background = backImage[whichImage];
 }

你能告诉我我做错了什么吗？我把图像文件和html都放在同一个文件夹里了。如果你还需要什么，请告诉我，我也可以把它放在这里。

非常感谢您为提供的任何帮助

以下是cookie的使用页面：

<DOCTYPE! html>
<html>
<head>
    <link rel="stylesheet" href="reset.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="customise.js"></script>

    <title>Vitalita - My Profile</title>
    <div id="Logo">
    <a href="home.html"><img id="logo" src="LogoSmall.png" height=125px border="0" alt="Image not found"></img></a>
    </div>
<body>

            <header>
        <nav id="top">
            <ul  id="menu">

                <li><a class="nav" id="about" href="#">about</a>
                    <ul class="submenu">
                        <li><a class="aboutMenu" href="aboutus.html">about us</a></li>
                        <li><a class="aboutMenu" href="contactus.html">contact us</a></li>
                    </ul>
                    </li>
                <li><a class="nav" id="health" href="#">health</a>
                    <ul class="submenu">
                        <li><a class="healthMenu" href="#">information</a></li>
                        <li><a class="healthMenu" href="#">exercise</a></li>
                        <li><a class="healthMenu" href="recipes.html">recipes</a></li>
                    </ul>
                </li>
                <li><a class="nav" id="media" href="#">media</a>
                    <ul class="submenu">
                        <li><a class="mediaMenu" href="articles.html">articles</a></li>
                        <li><a class="mediaMenu" href="#">videos</a></li>
                    </ul>
                </li>
                <li><a class="nav" id="tools" href="#">tools</a>
                    <ul class="submenu">
                        <li><a class="toolMenu" href="BMI.html">BMI calculator</a></li>
                        <li><a class="toolMenu" href="#">measurements</a></li>
                        <li><a class="toolMenu" href="#">exercise generator</a></li>
                    </ul>
                </li>
                <li><a class="nav" id="social" href="#">social</a>
                    <ul class="submenu">
                        <li><a class="socialMenu" href="social.html">social media</a></li>
                        <li><a class="socialMenu" href="#">games</a></li>
                    </ul>
                </li>
                <li><a class="nav" id="account" href="registration.html">account</a>
                <img src="icon.png" height=19px id="icon"></img>
                    <ul class="submenu">
                        <li><a class="accountMenu" href="#">my profile</a></li>
                        <li><a class="accountMenu" href="#">my progress</a></li>
                        <li><a class="accountMenu" href="#">my favourites</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
    </header>

    <body>
     <a href="http://instagram.com/vitalita_aus"><img id=insta src="insta.png" height=50px></img></a>
        <a href="http://www.facebook.com/pages/Vitalita/936304006385343"><img id=fb src="fb.png" height=50px></img></a>
        <a href="http://twitter.com/vitalia_aus"><img id=twit src="twit.png" height=50px></img></a>
<section id="feature">

<a href="javascript:changeBGImage(0);" id="dotButton">Dot Pattern</a>
<a href="javascript:changeBGImage(1)" id="dotButton">Stripes Pattern</a>
<a href="javascript:changeBGImage(2)" id="dotButton">Box Pattern</a>
<a href="javascript:changeBGImage(3)" id="dotButton">Default</a>

</section>
<hr id="first">
<footer>
<div class="Foot">
    <div id="footHome">
    <bold>Home</bold>
        <ul class="sitemap">
            <li><a class="links" href="home.html">Home Page</a>
        </ul>
    </div>  
    <div id="footAbout">
    <bold>About</bold>
        <ul class="sitemap">
            <li><a class="links" href="aboutus.html">About Us</a> 
                <ul class="sitemap">
                    <li><a class="links" href="">Style Guide</a>
                    <li><a class="links" href="">Evaluation Plan</a>
                </ul>   
            <li><a class="links" href="contactus.html">Contact Us</a>
            <li><a class="links" href="feedbackform.html">Feedback</a>
            <li><a class="links" href="helpdesk.html">FAQ</a>
            <li><a class="links" href="privacy.html">Privacy Policy</a>
        </ul>
    </div>
    <div id="footHealth">
        <bold>Health</bold>
        <ul class="sitemap">
            <li><a class="links" href="#">Information</a>
            <li><a class="links" href="#">Exercise</a>
            <li><a class="links" href="recipes.html">Recipes</a>        
        </ul>
    </div>
    <div id="footMedia">
        <bold>Media</bold>
        <ul class="sitemap">
            <li><a class="links" href="#">Articles</a>
            <li><a class="links" href="#">Videos</a>
            <li><a class="links" href="#">Games</a>
        </ul>
    </div>
    <div id="footTools">
        <bold>Tools</bold>
        <ul class="sitemap">
            <li><a class="links" href="BMI.html">BMI calculator</a>
            <li><a class="links" href="#">Measurements</a>
            <li><a class="links" href="#">Exercise generator</a>        
        </ul>
    </div>
    <div id="footSocial">
        <bold>Social</bold>
        <ul class="sitemap">
            <li><a class="links" href="social.html">Social Media</a>
            <li><a class="links" href="#">Games</a>
        </ul>
    </div>
    <div id="footAccount">
        <bold>Account</bold>
        <ul class="sitemap">
            <li><a class="links" href="#">My Profile</a>
            <li><a class="links" href="#">My Progress</a>
            <li><a class="links" href="#">My Favourites</a>     
        </ul>
    </div>
    </div>
    <hr id="second">
</footer>
<div id="copy">
Copyright &copy; Vitalita 2014. All Rights Reserved. 
<div>
</body>
</html>

要使用cookie，需要显式保存和加载它们。您可以在这个问题中找到如何在javascript中做到这一点。

相关文章：