//简易操作，只能当前页面储存一个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. 总结之H3C汇聚层交换机认证在线人数展示系统

    前情提要:意外接了老师说的一个小程序,然后计划7天(实际10天)的小项目就冒出来了. (1)时间与工程量.在和老师开始谈具体需求前,我凭感觉猜了猜完成这个小项目的时间.然后,再和老师确定需求后,再回头 ...

  2. 连接WCF报EntityFramework.SqlServer 错误的解决方法

    现象: The Entity Framework provider type 'System.Data.Entity.SqlServer.SqlProviderServices, EntityFram ...

  3. 远程通知中app更新提示。

    // // AppDelegate.m // SDJK // // Created by Jobs on 6/13/16. // Copyright (c) 2016 com.FlintInfo.dE ...

  4. jquery省市联动，根据公司需求而写

    //author:guan //2015-05-25 //省市联动 //实用说明,页面引用如下js //<script src="../js/jquery-1.6.3.min.js&q ...

  5. web框架思考

    以前一直不明白web框架是怎样实现路由.orm.接受请求的.今天看了下廖雪峰的python 实现web框架博客才明白. 简单总结并记录: http请求->wsgi->处理请求->返回 ...

  6. UE4 Windows平台部署游戏到IOS 第二部分

    点击加号后会出来如下截图 勾选上红色单选框处(因为这个我已经申请过了所以是灰色),然后continue到后面会出现下图 选择一个之前我提到申请证书会用的的那个.csr后缀文件夹,完成以后就可以下载证书 ...

  7. jquery 无缝滚动 jquery.kxbdmarquee

    DEMO http://code.ciaoca.com/jquery/kxbdmarquee/demo/ 官网 http://code.ciaoca.com/jquery/kxbdmarquee/ D ...

  8. jquery .attr()

    在JS中设置节点的属性与属性值用到setAttribute(),获得节点的属性与属性值用到getAttribute(),而在jquery中,用一个attr()就可以全部搞定了,赞一个先 ^^ jque ...

  9. Bash漏洞批量检测工具与修复方案

    &amp;amp;lt;img src="http://image.3001.net/images/20140928/14118931103311.jpg!small" t ...

  10. cloudera manager安装spark后使用spark shell编写基于scala的world count

    val file = sc.textFile("hdfs://zhcloudil-lcnode04:8020/user/cloudil/wc_spark.txt") val cou ...