//简易操作，只能当前页面储存一个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. Object.prototype 与 Function.prototype 与 instanceof 运算符

    方法: hasOwnProperty isPrototypeOf propertyIsEnumerable hasOwnProperty 该方法用来判断一个对象中的某一个属性是否是自己提供的( 住要用 ...

  2. 用 Express4 写一个简单的留言板

    Knowledge Dependence:阅读文本前,你需要熟悉 Node.js 编程.Express 以及相关工具和常用中间件的使用. Node.js 以其单线程异步非阻塞的特点,越来越被广大的 W ...

  3. JavaScript构造函数学习笔记

    1 理解Javascript constructor实现原理 在 JavaScript 中,每个函数都有名为“prototype”的属性,用于引用原型对象.此原型对象又有名为“constructor” ...

  4. jQuery：cookie插件的使用

    Jquery插件就是在Jquery基础之上,开发的基于Jquery的javascript库. 在Jquery中,引入cookie插件后,可以很方便的定义某个cookie的名称,并设置cookie值.通 ...

  5. 2016年5月面试题(Unity&iOS)

    NGUI的DrawCall drawcall定义:对底层图形程序(比如:OpenGL ES)接口的调用,以在屏幕上画出东西. List在内存中连续的空间保存 List是线性直接存储类型 mipMap是 ...

  6. 【转】构建C1000K的服务器(1) – 基础

    原文来自 ideawu 构建C1000K的服务器(1) – 基础 著名的 C10K 问题提出的时候, 正是 2001 年, 到如今 12 年后的 2013 年, C10K 已经不是问题了, 任何一个普 ...

  7. js 实现进度条功能。

    /** * 纯js进度条 * Created by kiner on 15/3/22. */ function progress(options){ this.w = (options &&a ...

  8. Spring任务调度器之Task的使用

    Spring Task提供两种方式进行配置,正如大家所想吧,还是一种是annotation(标注),而另外一种就是XML配置了.但其实这里我觉得比较尴尬,因为任务调度这样的需求,通常改动都是比较多的, ...

  9. JSP代码加固

    String id = request.getParameter("id"); String id = id.replace("'","") ...

  10. iOS 动画

    图层树.寄宿图以及图层几何学(一)图层的树状结构 技术交流新QQ群:414971585 巨妖有图层,洋葱也有图层,你有吗?我们都有图层 -- 史莱克 Core Animation其实是一个令人误解的命 ...