jquery cookie记住用户名和密码(使用方法)


<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属性
百度
这个例子里元素的DOM属性有“href、target和class”,这些属性就是元素本身就带有的属性,也是W3C标准里就包含有这几个属性,或者说在IDE里能够智能提示出的属性,这些就叫做固有属性。处理这些属性时,建议使用prop方法。

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

你可能感兴趣的:(jquery)