jquery cookie记住用户名和密码（使用方法）

来源：互联网发布：知画生孩子是第几集编辑：程序博客网时间：2024/05/19 02:43

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>记住用户名密码操作</title><script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="http://apps.bdimg.com/libs/jquery.cookie/1.4.1/jquery.cookie.js" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" href="css/rem.css" /></head><body><ul><li><input type="text" id="username" name="username" class="form-control" placeholder="用户名" autofocus/></li><li><input type="password" id="userpwd" name="userpwd" class="form-control"  placeholder="密码" autofocus/></li><li><input type="checkbox" name="rememberUser" checked="true" id="rememberUser"/>记住密码</li><li><input type="submit" class="btn" value="设置" onclick="saveUserInfo()"/></li></ul><script type="text/javascript">/*记住用户名和密码*/$(function() {if ($.cookie("rememberUser")) {$("#rememberUser").attr("checked", true);$("#username").val($.cookie("userName"));$("#userpwd").val($.cookie("passWord"));}});//如果$.cookie("rememberUser")为true,即把cookie里存的userName，passWord的值赋给id是username,userpwd的input；function saveUserInfo() {if ($("#rememberUser").prop("checked") == true) {var userName = $("#username").val();var passWord = $("#userpwd").val();$.cookie("rememberUser", "true", {expires: 7}); // 存储一个带7天期限的 cookie$.cookie("userName", userName, {expires: 7}); // 存储一个带7天期限的 cookie$.cookie("passWord", passWord, {expires: 7}); // 存储一个带7天期限的 cookie} else {$.cookie("rememberUser", "false", {expires: -1}); // 删除 cookie$.cookie("userName", '', {expires: -1});$.cookie("passWord", '', {expires: -1});}}//如果$("#rememberUser").prop("checked") == true，把id为username，userpwd的值赋给cookie里的userName，passWord，并设置有效期是七天</script></body></html>

设置cookie
$.cookie(‘the_cookie’, ‘the_value’);

设置一个有效期为 7 天的 cookie：
$.cookie(‘the_cookie’, ‘the_value’, {expires: 7});

读取 cookie：
$.cookie(‘the_cookie’);

删除 cookie：
$.cookie(‘the_cookie’, null);

查看存储的cookies；
控制台——Resources——cookies

这个地方是关键，之前一直保存不了cookie,发现问题出在这；如果把prop()换成attr()确实保存不了
if ($(“#rememberUser”).prop(“checked”) == true) { … … }

prop与attr之间的区别主要在于类似checkbox\radio\select的用prop可以返回true/false

像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此需要使用prop方法去操作才能获得正确的结果。

$(“#chk1”).prop(“checked”) == false
$(“#chk2”).prop(“checked”) == true

如果上面使用attr方法，则会出现：

$(“#chk1”).attr(“checked”) == undefined
$(“#chk2”).attr(“checked”) == “checked”

固有属性、自定义DOM属性
<a href="" target="_self" class="btn">百度</a>
这个例子里元素的DOM属性有“href、target和class”，这些属性就是元素本身就带有的属性，也是W3C标准里就包含有这几个属性，或者说在IDE里能够智能提示出的属性，这些就叫做固有属性。处理这些属性时，建议使用prop方法。

<a href="#" id="link1" action="delete">删除</a>
这个例子里元素的DOM属性有“href、id和action”，很明显，前两个是固有属性，而后面一个“action”属性是我们自己自定义上去的，元素本身是没有这个属性的。这种就是自定义的DOM属性。处理这些属性时，建议使用attr方法。使用prop方法取值和设置属性值时，都会返回undefined值。

0 0