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 相关文章推荐
用JQuery实现表格隔行变色和突出显示当前行的代码
Feb 10 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
Jun 24 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
Mar 20 Javascript
简要了解jQuery移动web开发的响应式布局设计
Dec 04 Javascript
js控制台输出的方法(详解)
Nov 26 Javascript
微信小程序 小程序制作及动画(animation样式)详解
Jan 06 Javascript
移动端手指放大缩小插件与js源码
May 22 Javascript
vue中设置height:100%无效的问题及解决方法
Jul 27 Javascript
jquery.pager.js实现分页效果
Jul 29 jQuery
微信小程序通过一个json实现分享朋友圈图片
Sep 03 Javascript
js实现整体缩放页面适配移动端
Mar 31 Javascript
jQuery中getJSON跨域原理的深入讲解
Sep 02 jQuery
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
You might like
ThinkPHP模版中导入CSS和JS文件的方法
2014/11/29 PHP
修复ShopNC使用QQ 互联时提示100010 错误
2015/11/08 PHP
PHP实现二维数组根据key进行排序的方法
2016/12/30 PHP
laravel 实现向公共模板中传值 (view composer)
2019/10/22 PHP
JavaScript 不只是脚本
2007/05/30 Javascript
javascript操作cookie_获取与修改代码
2009/05/21 Javascript
JavaScript Date对象 日期获取函数
2010/12/19 Javascript
Javascript玩转继承(三)
2014/05/08 Javascript
JQuery的ON()方法支持的所有事件罗列
2015/02/28 Javascript
javascript框架设计之种子模块
2015/06/23 Javascript
JS截取字符串实例详解
2015/11/24 Javascript
浅谈jQuery为哪般去掉了浏览器检测
2016/08/29 Javascript
AngularJS 限定$scope的范围实例详解
2017/06/23 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
2017/09/18 jQuery
使用FileReader API创建Vue文件阅读器组件
2018/04/03 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
2019/06/19 Javascript
python 域名分析工具实现代码
2009/07/15 Python
Python实现计算文件夹下.h和.cpp文件的总行数
2015/04/23 Python
Python迭代器与生成器基本用法分析
2018/07/26 Python
python利用itertools生成密码字典并多线程撞库破解rar密码
2019/08/12 Python
利用rest framework搭建Django API过程解析
2019/08/31 Python
python中round函数保留两位小数的方法
2020/12/04 Python
前端H5 Video常见使用场景简介
2020/08/21 HTML / CSS
乐高积木玩具美国官网:LEGO Shop US
2016/09/16 全球购物
法国设计制造的扫帚和刷子:Andrée Jardin
2018/12/06 全球购物
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的
2015/07/24 面试题
毕业生个人求职的自我评价
2013/10/28 职场文书
精彩的推荐信范文
2013/11/26 职场文书
《大自然的语言》教学反思
2014/04/08 职场文书
工业自动化专业自荐信范文
2014/04/10 职场文书
金融系应届毕业生求职信
2014/05/26 职场文书
安全伴我行演讲稿
2014/09/04 职场文书
财务整改报告范文
2014/11/05 职场文书
小数乘法教学反思
2016/02/22 职场文书
导游词之金鞭溪风景区
2019/09/12 职场文书
基于Apache Hudi在Google云构建数据湖平台的思路详解
2022/04/07 Servers