JQuery-cookie插件

最新推荐文章于 2025-04-05 18:15:24 发布

原创最新推荐文章于 2025-04-05 18:15:24 发布 · 164 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#JQuery-cookie插件

Javascript、JQuery练习专栏收录该内容

69 篇文章

订阅专栏

本文介绍了如何使用jQuery和Cookie插件在用户浏览器上保存和读取用户信息，通过实例演示了当用户输入名称并点击“记住我”按钮时，如何将用户名称保存为Cookie，并在下次访问时自动显示。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <script src="JQuery/jquery-2.0.0.js" type="text/javascript"></script>
    <script src="JQuery/jquery.cookie.js" type="text/javascript"></script>
</head>
<body>
    <input type="text" id="txtName"/><input type="button" value="记住我"id="btnRememberMe"/>
    <p>你好，游客！</p>
    <script type="text/javascript">
        //cookie是什么以及他的特点
        //cookie就是保存在浏览器上的内容。
        //1.cookie保存到客户端的硬盘里，根据不同的浏览器保存的路径不同
        //2.有一定的安全性问题
        //3.cookie是和浏览器相关的
        //4.cookie是经过浏览器写入硬盘的
        //5.cookie是和域名相关的
        //6.cookie是由浏览器在用户请求相同的域名时一起携带发起请求的
        //7.因为cookie是写在客户端浏览器的，所以我们随时可以删除对应的cookie信息
        $(function () {
            //首先读取cookie
            if ($.cookie("userName")) {
                $("p").text("你好，"+$.cookie("userName")+"！");
            }
            else {
                $("p").text("你好，游客！");
            }
            $("#btnRememberMe").click(function () {
                //获取用户名称
                var user_name = $("#txtName").val();
                //写入cookie
                $.cookie("userName", user_name, { expires: 7, path: "/", secure: false });
            });
        });
    </script>
</body>
</html>