原生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. Execl导出系统

    前台代码: <button class="btn btn-warning" type="button" onclick="location.hr ...

  2. 题解【洛谷P1379】八数码难题

    题面 典型的\(\text{BFS}\). 双向广搜是一种对\(\text{BFS}\)的优化,它适用于起点和终点都明确的题目. 这里给出我的双向广搜模板. inline int bfs()//双向广 ...

  3. python3安装虚拟环境（windows）

    1.pip install virtualenv   :安装命令 2.pip install virtualenvwrapper-win:安装命令 3.配置WORKON_HOME环境变量: 变量名:W ...

  4. 解决jmeter 24h长时间压测-o生成报告文件达到几个g以及以上的问题

    问题描述:jmeter执行稳定性测试时,因时间过长,导致jtl文件过大,生成html报告过程报内存溢出错误(增加内存配置也不能解决) 使用 jmeter -n -t    test.jmx   -l  ...

  5. [C语言学习笔记四]变量与系统的交互

    使用 const 创建常量和使用 volatie 优化变量 C语言中使用 const 定义常量. 例如: const INT a = 10; 此处如果添加a = 20;,编辑器则会报错,因为此处 a ...

  6. 大数据-Storm

    Storm 流式处理框架 Storm是实时的,分布式,高容错的计算系统.java+cljoure Storm常驻内存,数据在内存中处理不经过磁盘,数据通过网络传输. 底层java+cljoure构成, ...

  7. IntelliJ IDEA 2017.3尚硅谷-----配置 Maven

  8. tianmao项目的学习笔记

    1.后台-分类管理/查询 实体相关的知识: 1.1@Entity和@Table的区别:https://www.cnblogs.com/softidea/p/6216722.html 1.2@JsonI ...

  9. 2.(group by)如何让分组后，每组中的数据按时间倒序排列(group by和 order by的分组按排列)

    比如说有表devicedata: 问题: 现在我想将devicedata这个表中的数据,先按device_id这个字段分组,然后每组中的数据按时间字段ts从大到小的排列, 如何解决呢? 错误的sql: ...

  10. 微信环境中如何实现跳转到手机默认外部浏览器下载apk文件

    由于微信的限制,应用文件在内置浏览器中下载全部被屏蔽掉,造成很多人用微信扫描二维码下载时点击下载按钮没反应,我想到的是做一个提示用户在浏览器中打开下载.其实原来很简单,就是判断当前是在微信内置浏览器中 ...