用cookie显示自定义内容的简单代码

Simple code to show custom content with cookies

本文关键字：简单 代码 cookie 显示 自定义      更新时间：2023-09-26

我是一名设计师而不是程序员，经过几天的谷歌搜索，我不得不转向这里寻求帮助。我相信这对程序员来说相当简单。我需要的是一个代码，允许用户选择复选框来设置将在页面上显示相应图像的cookie。

例如一个带有选项[a] [b] [c]的复选框表单，如果用户选择了[a]和[c]框，那么cookie将被设置并显示在页面的某个地方

<img src="a.gif"> <img src="c.gif">

如果用户返回表单并选择不同的选项，则将显示其他图像。基本上，这个脚本允许用户根据可用的选项自定义页面的某些部分。cookie不应该过期，这样用户就可以返回到他们的自定义页面。我需要它是在javascript，最好使用jQuery，如果它会简化代码，因为我已经加载jQuery的其他功能。

我应用了你的代码，但它没有创建一个cookie。我在html代码中缺少什么?

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src="yourcookiecode.js"></script>
</head>
<BODY>
<form>
<input type="checkbox" name="a" onClick="SetCookie('name', this.name, exp);">
<input type="checkbox" name="b" onClick="SetCookie('name', this.name, exp);">
<input type="checkbox" name="c" onClick="SetCookie('name', this.name, exp);">
</form>
</body>
</html>

UPDATED CODE:

见:http://jsfiddle.net/87H7s/2/

HTML: 

<input type="checkbox" name="a">
<input type="checkbox" name="b">
<input type="checkbox" name="c">
<div id="somediv"></div>
JAVASCRIPT: 

$(document).ready(function() {
    $(':checkbox').each( function(){
         //Search if checkbox exist in cookie
        var checkbox = $(this);
         var getname = checkbox.attr('name');
         var searchCookie = $.cookie(getname);
        if(searchCookie != null) {
         //Was in div, now add img
            $(':checkbox[name*="'+getname+'"]').attr('checked',true);
            $('#somediv').append('<img src="'+getname+'.gif" />');
        }
    });

    $(':checkbox').change( function() {
        var checkbox = $(this);
        var isChecked = checkbox.is(':checked');
        var getname = checkbox.attr('name');
        if(isChecked) {
         //Add to cookie, add img
             $.cookie(getname, 'true', { expires: 7 });   
             $('#somediv').append('<img src="'+getname+'.gif" />');
        } else {
         //Unchecked, remove from cookie
            $('#somediv').find('img[src*="'+getname+'"]').remove();
            $.cookie(getname, null);
        }
    });
});

你需要cookie插件:https://github.com/carhartl/jquery-cookie

然后你可以这样做:

$(:checkbox).each( function(){
     //Search if checkbox exist in cookie
     var getname = checkbox.attr('name');
     var searchCookie = $.cookie(getname);
    if(searchCookie != null) {
     //Was in div, now add img
        $('#somediv').append('<img src="'+getname+'.gif" />');
    }
});

$(:checkbox).change( function() {
    var checkbox = $(this);
    var isChecked = checkbox.is(':checked');
    if(isChecked) {
         var getname = checkbox.attr('name');
     //Add to cookie, add img
         $.cookie(getname, 'true', { expires: 7 });   
         $('#somediv').append('<img src="'+getname+'" />');
    } else {
     //Unchecked, remove from cookie
        $.cookie(getname, null);
    }
});
相关文章：