编程 Javascript

jQuery的cookie插件实现保存用户登陆信息

Posted in Javascript onApril 15, 2014

<!DOCTYPE html> 
<html> 
<head> 
<title>cookies.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
<meta http-equiv="description" content="this is my page"> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<style type="text/css"> 
.txt{ 
width: 150px; 
height:20px; 
border: 1px blue solid; 
border-radius:0.5em; 
margin-bottom: 5px; 
padding-left: 5px; 
} 
</style> 
<script type="text/javascript" src="../js/jquery-1.10.2.js"></script> 
<script type="text/javascript" src="../js/jquery.cookie.js"></script> 
<script type="text/javascript"> 
$(function(){ 

if($.cookie("name")){ 
//取值如果存在则赋值 
$("#username").val($.cookie("name")); 
} 

$("#mycookie").submit(function(){ 
//如果选中了保存用户名选项 
if($("#chkSave").is(":checked")){ 
//设置Cookie值 
$.cookie("name",$("#username").val(),{ 
expires:7,//设置保存期限 
path:"/"//设置保存的路径 
}); 
}else{ 
//销毁对象 
$.cookie("name",null,{ 
path:"/" 
}); 
} 
return false; 
}); 
}); 

</script> 
</head> 
<body> 
<form action="#" method="get" id="mycookie"> 
<div> 
用户名：<br> 
<input id="username" name="username" type="text" class="txt"> 
</div> 
<div> 
密码:<br> 
<input id="password" name="password" type="password" class="txt"> 
</div> 
<div> 
<input id="chkSave" type="checkbox">是否保存用户名 
</div> 
<div> 
<input id="cookBtn" class="btn" type="submit" value="提交"> 
</div> 
</form> 
</body> 
</html>

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript 文章截取部分无损html显示实现代码

May 04 Javascript

JavaScript学习笔记之JS对象

Jan 22 Javascript

Node.js 文件夹目录结构创建实例代码

Jul 08 Javascript

vue开发心得和技巧分享

Oct 27 Javascript

js 倒计时（高效率服务器时间同步）

Sep 12 Javascript

使用 Vue 绑定单个或多个 Class 名的实例代码

Jan 08 Javascript

vue单页应用加百度统计代码（亲测有效）

Jan 31 Javascript

JS和Canvas实现图片的预览压缩和上传功能

Mar 30 Javascript

js字符串倒序的实例代码

Nov 30 Javascript

JavaScript ES6箭头函数使用指南

Dec 30 Javascript

JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例

Jan 29 Javascript

详解vue+axios给开发环境和生产环境配置不同的接口地址

Aug 16 Javascript

jquery实现点击文字可编辑并修改保存至数据库

Apr 15 #Javascript

jQuery制作的别致导航有阴影背景高亮模式窗口

Apr 15 #Javascript

JS比较2个日期间隔的示例代码

Apr 15 #Javascript

模拟一个类似百度google的模糊搜索下拉列表

Apr 15 #Javascript

关闭浏览器窗口弹出提示框并且可以控制其失效

Apr 15 #Javascript

使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法

Apr 15 #Javascript

jquery新的绑定事件机制on方法的使用方法

Apr 15 #Javascript