原生js+本地储存登录注册

 1 //简易操作,只能当前页面储存一个username和password.
 2 <!DOCTYPE html>
 3 <html>
 4 <head>
 5 <meta charset="utf-8">
 6 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
 7 <meta name="apple-mobile-web-app-capable" content="yes">
 8 <meta name="apple-mobile-web-app-status-bar-style" content="black">
 9 <title>document</title>
10 <style>
11 #check{
12     position:absolute;
13     top:120px;
14     left:0px;
15 }
16 </style>
17 </head>
18 <body>
19 <img src="cat/1.jpg" width="100" id="img1">
20 //此处正常情况需要display:none。但是为了让大家看清楚 我没做处理。
21 <input onchange="show(this)" type="file" id="check"><br><br>
22 <br><br>
23 用户名:<input type="text" id="name">
24 <br><br>
25 密码: <input type="text" id="pass">
26 <br><br>
27 <input type="button" value="登录" id="log">
28
29 <input type="button" value="注册" id="add">
30 </body>
31 <script>
32 var oImg=document.getElementById(‘img1‘);
33 var read=new FileReader();
34 var reg=/^data:image/;
35 function show(a){
36     var oFile=a.files[0];
37     read.onload=function(){
38         if(reg.test(this.result)){
39             oImg.src=this.result;
40         }else{
41             alert(‘您输入的图片格式有误‘);
42             return false;
43         }
44     }
45     read.readAsDataURL(oFile);
46 }
47 var oLog=document.getElementById(‘log‘);
48 var oAdd=document.getElementById(‘add‘);
49 var oName=document.getElementById(‘name‘);
50 var oPass=document.getElementById(‘pass‘);
51 oName.value=localStorage.userName;
52 oPass.value=localStorage.passWord;
53
54 oAdd.onclick=function(){
55     var userName=oName.value;
56     var passWord=oPass.value;
57     var arr=[];
58     function findArr(){
59         for(var userName in localStorage){
60             arr.push(localStorage[userName]);
61         }
62         return arr;
63     }
64     var d=findArr();
65     if(userName==d[1]){
66         alert(‘账户已注册‘);
67         return false;
68     }else{
69         localStorage.userName=userName;
70         localStorage.passWord=passWord;
71         alert(‘注成功册‘);
72     }
73 };
74 oLog.onclick=function(){
75     var userName=oName.value;
76     var passWord=oPass.value;
77     var arr=[];
78     function findArr(){
79         for(var userName in localStorage){
80             arr.push(localStorage[userName]);
81         }
82         return arr;
83     }
84     var d=findArr();
85     if(userName==d[1]&&passWord==d[0]){
86         alert(‘登录成功‘);
87         //fn&&fn();
88     }else if(userName==d[1]&&passWord!=d[0]){
89         alert(‘密码错误‘);
90     }else if(userName!=d[1]){
91         alert(‘用户不存在‘);
92     }
93 };
94 </script>
95 </html>
时间: 2024-10-17 11:37:45

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

Vue(vue+node.js+mongodb)_登录注册(密码登录)

一.前言 1.密码登录(分析) 2.验证码部分 3.提交表单 4.保存显示 5.完善功能,首页中如果登录成功之后显示的是图标,没有登录显示的是“注册登录” 6.处理bug(当我们一刷新之后当前登录的信息都没有了) 二.主要内容 1.密码登录(分析) (1)第一步用户输入先提交登录表单信息 2.验证码部分 这里显示的验证码,在通过异步调用获取到,并且在后端存进session中 (1)前端部分 <!--获取验证码:前端--> <input type="text" maxl

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

序 一个以js验证表单的简洁的注册登录页面,不多说直接上图 效果 主要文件 完整代码 1 sign_up.html 注册表单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>sign-up</title> <link rel="stylesheet" href="css

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

首先需要新建四个文件 一个服务器js 一个保存数据的txt 一个登陆.一个注册页面html 1.注册页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>regist</title> </head> <body> <div> <label for="us

&lt;&lt;&lt; 网页中如何利用原生js和jquery储存cookie

javascript当中的cookie机制,使应用达到了真正的全局变量的要求,cookie是浏览器提供的一种机制,它将document 对象的cookie属性提供给JavaScript.可以由JavaScript对其进行控制,而并不是JavaScript本身的性质,由于cookie机制是把信息储存到硬盘,所以他可以用来做全局变量 cookie有关安全性和作用域 1.cookie可能被禁用.当用户非常注重个人隐私保护时,他很可能禁用浏览器的cookie功能:  2.cookie是与浏览器相关的.这

js验证登录注册

js验证登录注册的优势,在前台直接验证,不需要在后台读取返回数据验证,减轻服务器压力. 登陆验证得必要性,拦截恶意脚本的登录注册攻击. js代码如下: $(document).ready(function(){ var result=0; var show=""; var inresult; var tag=false; getArithmetic(); /** * 改变验证码算术式 */ $(document).on("click","#sswitch&

vue学习如何引入js,封装操作localStorage本地储存的方法

// 封装操作localStorage本地储存的方法 模块化的文件 //nodejs 基础 var storage={ set(key,value){ localStorage.setItem(key,JSON.stringify(value)); }, get(key){ return JSON.parse(localStorage.getItem(key)); }, remove(key){ localStorage.removeItem(key); } } export default s

JS网页特效操作流程——下拉菜单列表与登录注册弹窗效果

下拉菜单列表 <style>        *{            margin: 0px;            padding: 0px;        }        .menu{            width: 1100px;            height: 30px;            background-image: url(img/魅力罗兰Music炫图18.jpg);            margin-left: 200px;            ma

利用原生js做数据管理平台

摘要:数据管理平台在当今社会中运用十分广泛,我们在应用过程中,要对数据进行存储,管理,以及删除查询等操作,而我们在实际设计的时候,大牛们大多用到的是JQuery,而小白对jq理解也较困难,为了让大家回顾一下原生js,也为了让初学者对js熟练掌握,我们利用js进行设计,里面涉及到函数,事件,对象,已经存储,代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title&

Angular之简单的登录注册

使用Angular实现了一个简单的登录注册的功能........ 涉及到的Angular知识点很少 主要是这个功能的实现...(*^__^*) 嘻嘻-- 里面涉及到的知识点记录: 1.本地存储的操作 localStorage 获取本地存储的值 window.localStorage.getItem(key)-->value   (得到的数据是字符串"[ { "name": "andim", 'pwd': '123' } ]" ) 设置本地存