原生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. java内部类概念

    一.成员内部类作为外部类的成员存在的类,则称之为成员内部类 public class OuterClass{ public class InnerClass{ } } 成员内部类样例 成员内部类具有如 ...

  2. thinkphp3.2 中 Memcache 的配置和使用（memcahe的使用场景）

    Thinkphp的默认缓存方式是以File方式,在/Runtime/Temp 下生成了好多缓存文件. TIPS: TP3.2支持的缓存方式有:数据缓存类型,支持:File|Db|Apc|Memcach ...

  3. pygame 浅解

    import pygame from first_pygame.plane_spirit import * # 调用重载的精灵类 # 初始化 pygame.init() # 初始化所有所需游戏模块 s ...

  4. jvm(2)：垃圾收集和内存分配

    typora-root-url: ./ 垃圾收集 垃圾收集器关注的是线程共享的这部分内存. jvisualvm用来监控JVM的运行情况,可以用它来查看和浏览Heap Dump.Thread Dump. ...

  5. Port 3000 is already in use

    cmd输入:netstat -ano | findstr :3000//查看是谁占用了3000号端口 显示如下 TCP 0.0.0.0:3000 0.0.0.0:0 LISTENING 18412 T ...

  6. webpack4.41.0配置四(热替换)

    每次修改都要去编译,这个操作比较繁琐.所以我们希望编译过程是自动化的,而且页面的更新也是自动化的.所以需要使用这个热替换 1.首先安装webpack-dev-server:npm install  w ...

  7. Codeforces Round #620 (Div. 2)E（LCA求树上两点最短距离）

    LCA求树上两点最短距离,如果a,b之间距离小于等于k并且奇偶性与k相同显然YES:或者可以从a先走到x再走到y再走到b,并且a,x之间距离加b,y之间距离+1小于等于k并且奇偶性与k相同也输出YES ...

  8. thinkphp的模型操作

    先开个坑 WHERE篇 1, 模糊查询    where['keyword'] = [ 'like' , '%test%'] 2,   不等于,大于 ,小于 EQ 等于(=)NEQ 不等于(<& ...

  9. Redis07——Redis五大数据类型 set

    set Redis中set可以自动排重(不会出现重复数据),提供了判断某个成员是否在一个set集合内的重要接口(list没有此功能) 无序集合,底层是一个value为null的hash表,添加.删除. ...

  10. linux用字符模式修改权限

    -rw-r--r--  tt.htm 从第二个字符起rw是说用户apple有读.写权,没有运行权,接着的r--表示用户组users只有读权限,没有运行权,最后的r--指其他人 (others)只有读权 ...