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

<!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值。

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

猜你喜欢