利用cookie 记住背景颜色 (利用Jquery对Cookie进行设值与取值)

Jquery-Cookie官网地址


Cookie 在客户端设置值 $.cookie("键" , "值")    Cookie中保存的值都是文本

Cookie 在客户端取值 $.cookie("键") 

<!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>
    <title></title>
    <script type="text/javascript" src="Scripts/jquery-1.10.2.min.js"></script>
    <script src="Scripts/jquery.cookie.js" type="text/javascript"></script>
    <style type="text/css">
        #p1{ background-color:Red ; width:40px; border:solid 1px yellow ; margin:5px; float:left;clear:right}
        #p2{background-color:Yellow ;width:40px; border:solid 1px red; margin:5px; float:left;clear:left}
        #p3{background-color:Blue;width:40px; border:solid 1px yellow; margin:5px; float:left;clear:left}
    </style>
    <script type="text/javascript">
        $(function () {
            if ($.cookie("bgcolor")) {
                $("body").css("background-color", $.cookie("bgcolor"));
            }

            $("p").click(function () {
                $("body").css("background-color", $(this).css("background-color"));
                $.cookie("bgcolor", $("body").css("background-color"), { expires: 7 });
            })
        })
    </script>
</head>
<body>
<p id="p1">红色</p><p id="p2">黄色</p><p id="p3">蓝色</p>


</body>
</html>

<2>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.11.2.js" type="text/javascript"></script>
    <script src="jquery.cookie-v1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {

            if ($.cookie("uName") != null) {
                
                //读取key为uName的这个Cookie的值
                $("#UserName").val($.cookie("uName"));
            }

            $("#btnClick").click(function () {

                //创建一个key为uName的Cookie ,值为$("#UserName").val() ;有效期为7天
                $.cookie("uName", $("#UserName").val(), { expires: 7 });
            })
        })
    </script>
</head>
<body>
<form id="form1">
<input type="text"  name="UserName" id="UserName"/>
<input type="button" value="提交"  id="btnClick"/>
</form>
</body>
</html>


你可能感兴趣的:(jquery)