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中创建实例与原型继承揭秘
Dec 21 Javascript
Jquery Uploadify上传带进度条的简单实例
Feb 12 Javascript
JavaScript中实现继承的三种方式和实例
Jan 29 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
Nov 21 Javascript
Javascript 获取鼠标当前的位置实现方法
Oct 27 Javascript
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
Angular2.0实现modal对话框的方法示例
Feb 18 Javascript
vue中如何让子组件修改父组件数据
Jun 14 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
Jul 17 Javascript
layui 表格操作列按钮动态显示的实现方法
Sep 06 Javascript
JavaScript和TypeScript中的void的具体使用
Sep 12 Javascript
vue - props 声明数组和对象操作
Jul 30 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
You might like
PHP SEO优化之URL优化方法
2011/04/21 PHP
使用PHPMailer发送邮件实例
2017/02/15 PHP
javascript 拖动表格行实现代码
2011/05/05 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
2013/01/11 Javascript
extjs中form与grid交互数据(record)的方法
2013/08/29 Javascript
原生javascript实现Tab选项卡切换功能
2015/01/12 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
2016/10/12 Javascript
NodeJS配置HTTPS服务实例分享
2017/02/19 NodeJs
浅谈Webpack 是如何加载模块的
2018/05/24 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
2018/10/24 Javascript
JavaScript文本特效实例小结【3个示例】
2018/12/22 Javascript
vue ssr 实现方式(学习笔记)
2019/01/18 Javascript
ES6 Symbol数据类型的应用实例分析
2019/06/26 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
2019/07/17 Javascript
react native 仿微信聊天室实例代码
2019/09/17 Javascript
vue监听dom大小改变案例
2020/07/29 Javascript
[06:53]2018DOTA2国际邀请赛寻真——为复仇而来的Newbee
2018/08/15 DOTA
python利用MethodType绑定方法到类示例代码
2017/08/27 Python
python实现操作文件(文件夹)
2019/10/31 Python
python对数组进行排序,并输出排序后对应的索引值方式
2020/02/28 Python
浅谈多卡服务器下隐藏部分 GPU 和 TensorFlow 的显存使用设置
2020/06/30 Python
python批量修改交换机密码的示例
2020/09/22 Python
HTML5 Canvas鼠标与键盘事件demo示例
2013/07/04 HTML / CSS
全球航班旅行搜索网站:Cheapflights
2017/05/19 全球购物
全球精选男装和家居用品:Article
2020/04/13 全球购物
名词解释WEB SERVICE,SOAP,UDDI,WSDL,JAXP,JAXM;JSWDL开发包的介绍。
2012/10/27 面试题
铭万公司.net面试题笔试题
2014/07/20 面试题
大学社团计划书
2014/05/01 职场文书
流动人口婚育证明范本
2014/09/26 职场文书
房屋租赁协议书(标准版)
2014/10/02 职场文书
2015年党建工作总结
2015/03/30 职场文书
文艺委员竞选稿
2015/11/19 职场文书
应届毕业生的自我评价
2019/06/21 职场文书
python 爬取天气网卫星图片
2021/06/07 Python
Go语言实现Base64、Base58编码与解码
2021/07/26 Golang
DE1107机评
2022/04/05 无线电