//简易操作，只能当前页面储存一个username和password.

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

 <meta name="apple-mobile-web-app-capable" content="yes">

 <meta name="apple-mobile-web-app-status-bar-style" content="black">

 <title>document</title>

 <style>

 #check{

     position:absolute;

     top:120px;

     left:0px;

 }

 </style>

 </head>

 <body>

 <img src="cat/1.jpg" width="" id="img1">

 //此处正常情况需要display：none。但是为了让大家看清楚 我没做处理。

 <input onchange="show(this)" type="file" id="check"><br><br>

 <br><br>

 用户名：<input type="text" id="name">

 <br><br>

 密码： <input type="text" id="pass">

 <br><br>

 <input type="button" value="登录" id="log">

 <input type="button" value="注册" id="add">

 </body>

 <script>

 var oImg=document.getElementById('img1');

 var read=new FileReader();

 var reg=/^data:image/;

 function show(a){

     var oFile=a.files[];

     read.onload=function(){

         if(reg.test(this.result)){

             oImg.src=this.result;

         }else{

             alert('您输入的图片格式有误');

             return false;

         }

     }

     read.readAsDataURL(oFile);

 }

 var oLog=document.getElementById('log');

 var oAdd=document.getElementById('add');

 var oName=document.getElementById('name');

 var oPass=document.getElementById('pass');

 oName.value=localStorage.userName;

 oPass.value=localStorage.passWord;

 oAdd.onclick=function(){

     var userName=oName.value;

     var passWord=oPass.value;

     var arr=[];

     function findArr(){

         for(var userName in localStorage){

             arr.push(localStorage[userName]);

         }

         return arr;

     }

     var d=findArr();

     if(userName==d[]){

         alert('账户已注册');

         return false;

     }else{

         localStorage.userName=userName;

         localStorage.passWord=passWord;

         alert('注成功册');

     }

 };

 oLog.onclick=function(){

     var userName=oName.value;

     var passWord=oPass.value;

     var arr=[];

     function findArr(){

         for(var userName in localStorage){

             arr.push(localStorage[userName]);

         }

         return arr;

     }

     var d=findArr();

     if(userName==d[]&&passWord==d[]){

         alert('登录成功');

         //fn&&fn();

     }else if(userName==d[]&&passWord!=d[]){

         alert('密码错误');

     }else if(userName!=d[]){

         alert('用户不存在');

     }

 };

 </script>

 </html>

原生js+本地储存登录注册的更多相关文章

  1. 2.node.js (二)服务器登录注册 与 包的发布

    get: 不安全 小 2k 数据会在地址栏上显示 从服务器获取 快 post: 相对安全 https 大 1G 不会 向服务器发送 慢 get:直接解析url地址 借助 url模块 var urlOb ...

  2. 原生js验证简洁美观注册登录页面

    序 一个以js验证表单的简洁的注册登录页面,不多说直接上图 效果 主要文件 完整代码 sign_up.html 注册表单 <!DOCTYPE html> <html lang=&qu ...

  3. js本地储存userData实例

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head ...

  4. 【招聘App】—— React/Nodejs/MongoDB全栈项目：登录注册

    前言:最近在学习Redux+react+Router+Nodejs全栈开发高级课程,这里对实践过程作个记录,方便自己和大家翻阅.最终成果github地址:https://github.com/66We ...

  5. js操作数据库实现注册和登陆

    自从node-js出现之后,不只是java,php等后端语言可以操作数据库,进行内容的增删改查,javascript简本语言同样具备了该项技能,而且在node下,js具备了很强的操作性和代码的阅读性, ...

  6. vue.js+koa2项目实战（三）登录注册模态框

    登录注册模态框 注: [Vue warn]: Do not use built-in or reserved HTML elements as component id: diaLog 原因:diaL ...

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

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

  8. node.js实现简单的登录注册页面

    首先需要新建四个文件 一个服务器js 一个保存数据的txt 一个登陆.一个注册页面html 1.注册页面 <!DOCTYPE html> <html lang="en&qu ...

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

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

随机推荐

  1. IOS atomic与nonatomic，assign,copy与retain的定义和区别

    IOS atomic与nonatomic,assign,copy与retain的定义和区别 atomic和nonatomic用来决定编译器生成的getter和setter是否为原子操作.        ...

  2. 移动销售端app的需求分析

    随着网络时代的发展,人们对于网络的依赖越来越大,网上购物便成了一个很大的消费者市场.. 如何分析一个综合的移动销售端app的需求我认为首先要确定用户,从用户的角度一个一个功能过,评估每一个功能的需求, ...

  3. 收拾那掉了一地的session

    多个页面有如下多个session,本来可能是如下面这样的 Session["UId"] = 10; Session["UName"] = "test& ...

  4. Python 基礎 - 元組與簡易購物車實做

    tuple(元組) 其實跟列表差不多,也是存一組數,只不過是它一旦建立了,就不能修改了,只能做 切片 跟 查詢,所以只叫 只讀列表 語法: name = ("Rogers", &q ...

  5. css常用公共样式

    /*style reset*/ body,ul,p,h1,h2,h3,h4,h5,h6,dl,dd,form,input,textarea,select{padding:0; margin:0;fon ...

  6. 使用Quartz.net动态设置定时时间问题

    关于使用Quartz.net就不用解释了.. 应客户需求问题..需要将做一个界面设置定时的时间.因此我在百度一番..用CronExpression类可以设置时间... 我知道这个类有定义好的字段..不 ...

  7. 1 error C4996: 'pcl::SAC_SAMPLE_SIZE':

    使用PCL1.8   中使用粗配准拼接 错误 1 error C4996: 'pcl::SAC_SAMPLE_SIZE': This map is deprecated and is kept onl ...

  8. linux按键驱动之poll

    上一节应用程序的死循环里的读函数是一直在读的:在实际的应用场所里,有没有那么一种情况,偶尔有数据.偶尔没有数据,答案当然是有的.-->poll机制:Poll机制实现的是一定时间如果没有按键的话就 ...

  9. 利用linux漏洞进行提权

    RHEL5—RHEL6下都可以提权 本人测试环境CenOS6.5:该方法只能用作与有root用户切换到普通用户的环境,如果是普通用户直接登录在执行最后一步的时候直接退出登录 $ mkdir /tmp/ ...

  10. linux下安装nodejs

    之前安装过windows下的node,感觉还是很方便的,不成想今天安装linux下的坑了老半天,特此记录. 1. 下载node.js,官方有提供源码版本和编译版的,方便起见我使用编译版的,下载后解压缩 ...