//简易操作，只能当前页面储存一个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. Map循环的三种方法

    import java.util.HashMap; import java.util.Iterator; import java.util.Map; public class MapTest { pu ...

  2. 部署点评Cat监控项目(转)

    原文地址:http://www.bubuko.com/infodetail-986338.html 在项目中监控代码运行的状况,可以采用点评的Cat项目来监控整个项目,但是按照官方的文档来部署cat, ...

  3. Python的名字绑定

    Python的名字绑定 在Python中,对象是通过名字进行关联和引用的.Python通过名字绑定操作来引入名字. Python中的所谓的代码块就是一段作为执行单元的程序.比如:模块.函数.类定义.在 ...

  4. 【科普】为什么WiFi自动信道选到的信道多数在1/6/11

    http://bbs.hiwifi.com/thread-4126-1-1.html 论坛上不少朋友很困惑,为什么小极的自动信道选择选到的信道只会在1.6.11这三个信道呢?WiFi不是一共有10几个 ...

  5. 由于OCR文件损坏造成Oracle RAC不能启动的现象和处理方法

    v$cluster_interconnects 集群节点间通信使用的IP地址 错误信息 使用了公网进行连接 SQL> select * from v$cluster_interconnects; ...

  6. PHP--------TP中的ajax请求

    PHP--------TP中的ajax请求 以jQuery中的ajax为例: (1)引入jQuery 通过模板替换表示路径,我们可以自定义模板替换变量(在config中定义) /*自定义模板替换标签* ...

  7. java基础小知识

    1.1常量: 基本数据类型常量 字符常量 整数常量的表现形式:一进制的形式来表示(二进制,八进制,十进制,十六进制) 生活中:十进制(0-9)  ,星期(七进制(0-6)) ,时间(十二进制(0-11 ...

  8. (转) Spring框架笔记（二十五）——NamedParameterJdbcTemplate与具名参数（转）

    在经典的 JDBC 用法中, SQL 参数是用占位符 ? 表示,并且受到位置的限制. 定位参数的问题在于, 一旦参数的顺序发生变化, 就必须改变参数绑定. 在 Spring JDBC 框架中, 绑定 ...

  9. 解决Oracle在scott用户下创建视图（VIEW）权限不足的方法

    问题描述:在scott用户下创建视图的时候,报错:权限不足.(其他用户以此类推)解决方法: 以dba用户登录 sqlplus / as sysdba 赋予scott用户创建VIEW的权限 grant  ...

  10. opendir函数

    #include<sys/types.h> #include<dirent.h> DIR *dirptr = NULL; struct dirent *entry; dirpt ...