原生js创建cookie，功能：点击登录按钮时，将用户名、密码存为cookie；页面再次加载时，自动读取cookie中的用户名、密码。

<html>
<head>
<title>cookies</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function setCookie(name,value,expiredays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString());//创建cookie
}

function getCookie(name)//获取cookie
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(name + "=");
if (c_start!=-1)
{
c_start=c_start + name.length+1 ;
c_end=document.cookie.indexOf(";",c_start);
if (c_end==-1) c_end=document.cookie.length;
return unescape(document.cookie.substring(c_start,c_end));
}
}
return "";
}

function checkCookie()//检查cookie是否存在，若存在，读取出来
{
var userName=document.getElementById("userName");
var password=document.getElementById("password");
var UValue=getCookie(userName.id);
var PValue=getCookie(password.id);
if (UValue!=null && UValue!="" && PValue!=null && PValue!="")
{
userName.value=UValue;
password.value=PValue;
}
}

function saveCookie(){//保存cookie
var UName=document.getElementById("userName");
var PName=document.getElementById("password");
if(UName.value==""){
alert("请输入用户名！");
}
else if(PName.value==""){
alert("请输入密码！");
}
else if(confirm("是否保存用户名密码？")){
setCookie(UName.id,UName.value,30);
setCookie(PName.id,PName.value,30);
}
}
</script>
</head>

<body onload="checkCookie()">
<input id="userName" type="text" name="" placeholder="用户名" value="">
<input id="password" type="password" name="" placeholder="密码" value="">
<input type="button" name="" value="登录" onclick="saveCookie()">
</body>
</html>

原生js登录创建cookie的更多相关文章

  1. 原生JS封装创建多级菜单函数

    手写一个使用原生JS封装的多级菜单的函数,满足以下几点需求. 子类层级不确定,可根据数据自动生成多级菜单. 操作便捷,只需传入一个HTML标签. 缺点: 需要满足特定的数据结构 废话不多说,展示代码. ...

  2. 原生JS+ CSS3创建loading加载动画；

    效果图: js创建loading show = function(){ //loading dom元素 var Div = document.createElement("div" ...

  3. 原生js动态创建文本内容的几种方式

    1.通过CreateTextNode文本节点 首先创建该元素(元素节点),然后向一个已存在的元素追加该文本节点 <!DOCTYPE html> <html> <body& ...

  4. 原生js动态创建、获取、删除属性的几种方式

    1.创建属性 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...

  5. 用JS动态创建登录表单，报了个小错误

    后来发现原来是: dvObj.style.border='#Red 1px sold'; 其中的Red多谢了一个‘#’, 但是奇怪的是在chrome和firefox都备有报错,但是在ie中报错了. 各 ...

  6. 初探原生js根据json数据动态创建table

    初探原生js根据json数据动态创建table 小生以实习生的职位进入了一家非纯软件的公司做asp.net开发,大半个月下来发现公司里居然没有前端工程师,这令我很诧异,跟着公司做项目,发现前端后台没有 ...

  7. 原生js+css实现重力模拟弹跳系统的登录页面

    今天小颖把之前保存的js特效视频看了一遍,跟着视频敲了敲嘻嘻,用原生js实现一个炫酷的登录页面.怎么个炫酷法呢,看看下面的图片大家就知道啦. 效果图: 不过在看代码之前呢,大家先和小颖看看css中的o ...

  8. 使用原生js创建自定义标签

    使用原生js创建自定义标签 效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  9. 原生js按回车键实现登录

    这篇文章主要介绍了原生JS按回车键实现登录的方法,众所周知,这是在web程序设计中的一个非常实用的小技巧,主要用于表单提交,包括注册.登录等等功能,具有很好的用户体验,有着非常广泛的实用价值,需要的朋 ...

随机推荐

  1. CBE引擎概览

    摘录于CBE官方文档:https://www.comblockengine.com/docs/1.0/overview/index/ 架构图总览: Switch Fabric:交换机网络,根据网络环境 ...

  2. mysql数据库函数之left()、right()、substring()、substring_index()

    在实际的项目开发中有时会有对数据库某字段截取部分的需求,这种场景有时直接通过数据库操作来实现比通过代码实现要更方便快捷些,mysql有很多字符串函数可以用来处理这些需求,如Mysql字符串截取总结:l ...

  3. sql sever登录问题

    重启电脑后会发现连不上数据库了 按下win+r:输入cmd.连接你的ip,(telnet 127.0.0.1 xxxx)发现连接不上 正在连接127.0.0.1..无法打开到主机的连接. 在端口 14 ...

  4. mysql 查询时间戳格式化 和thinkphp查询时间戳转换

    我在网上看了好多写的,都差不多,甚至好多都是一个人写的被别人转载啥的,哎 我写一个比较简单的 1.mysql语句 格式化时间戳 select id,name,FROM_UNIXTIME(time,'% ...

  5. redis设置键值生存时间

    EXPIRE <KEY> <TTL> : 将键的生存时间设为 ttl 秒PEXPIRE <KEY> <TTL> :将键的生存时间设为 ttl 毫秒EXP ...

  6. AAC 码流信息分析

    AAC在对PCM数据进行编码时,使用window取出1024或128个数据进行MDCT转换到频域. Window的相关信息记录在ics_info中: 关于ics_info中各个字段的含义如下 wind ...

  7. HTML学习（16）颜色

    HTML 颜色由红色.绿色.蓝色混合而成. 颜色值 HTML 颜色由一个十六进制符号来定义,这个符号由红色.绿色和蓝色的值组成(RGB). 每种颜色的最小值是0(十六进制:#00).最大值是255(十 ...

  8. Word2010如何从指定页设置页码

    光标定位:将光标定位于需要开始编页码的页首位置.   插入分隔符的”下一页”:选择“页面布局—>分隔符—> 下一页”插入.   插入页码:选择“插入—>页码—> 页面底端”,选 ...

  9. 高斯消元-bzoj1013-球形空间产生器

    This article is made by Jason-Cow.Welcome to reprint.But please post the writer's address. http://ww ...

  10. [转] Go 的并发模式：Context

    [转] Go 的并发模式:Context tips:昨天看了飞雪无情的关于 Context 的文章,对 go 中 Context 有了一个初步的认识.今天看到一个 go 官方博客的关于 Context ...