//简易操作，只能当前页面储存一个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. 字符数组和string判断是否为空行 NULL和0 namespace变量需要自己进行初始化

    string 可以这样判断空行input !="" 字符数组可以通过判断第一个元素是否为空字符'\0',是的话为空行arrar[0]=='\0':或者用长度strlen(char ...

  2. Node黑客开发的10个好习惯（2016）

    在2015年底之际,javascript开发者已经掌握了大量的工具.最后一次我们调查的时候,现代化的JS蓝图才刚刚出现.今天,我们很容易在JS的庞大生态系统中迷失,而成功的团队大部分时间都遵守着JS开 ...

  3. 总结之H3C汇聚层交换机认证在线人数展示系统

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

  4. WinForm实现对权限菜单进行管理

    一.界面: 二.数据库访问类: public class DataClass { private readonly string connect = ConfigurationManager.AppS ...

  5. MVC+UnitOfWork+Repository+EF 之我见

    UnitOfWork+Repository模式简介: 每次提交数据库都会打开一个连接,造成结果是:多个连接无法共用一个数据库级别的事务,也就无法保证数据的原子性.一致性.解决办法是:在Reposito ...

  6. 《一个 Go 程序系统线程暴涨的问题》结论

    原文地址:https://zhuanlan.zhihu.com/p/22474724 作者的结论没写好,我来说两句.. 结论: Docker swarm自己有个函数,叫setTcpUserTimeou ...

  7. datatables增删改查的实现

    学习可参考:http://www.guoxk.com/node/jquery-datatables http://yuemeiqing2008-163-com.iteye.com/blog/20069 ...

  8. java中常见的几种Runtimeexception

    转自http://blog.csdn.net/qq635785620/article/details/7781026 一般面试中java Exception(runtimeException )是必会 ...

  9. IOS 二维码的实现

    1.首先导入Coreimage框架. //创建滤镜对象 CIFilter *filter = [CIFilter filterWithName:@"CIQRCodeGenerator&quo ...

  10. Web集群缓存一致性的思考

    共享cache+数据库实现缓存一致性: 1.1 memcache + mongo+定时器 1.1.1 memcache 优点:web集群共享数据 缺点:数据生命周期的不可预估性 1.1.2 mongo ...