<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

    </head>

    <body>

        <form>

            昵称：<input type="text" id="username"><br><br> 密码：

            <input type="password" id="password"><br><br>

            <input type="button" value="登录" id="login">

            <input type="button" value="注册" id="resiger">

            <input type="button" value="clear" id="clear">

        </form>

        <script type="text/javascript">

            //需求分析：把获取的用户名和密码存入本地存储中

            //当用户登陆的时候判断用户名和密码是否在存储中

            //我认为应该这样存储用户名和密码

            //userpass:[{username:zhangsan,password:123456},{username:lisi,password:123456}]

            var login = document.getElementById("login");

            var resiger = document.getElementById("resiger");

            var user = document.getElementById("username");

            var pass = document.getElementById("password");

            var clear = document.getElementById("clear");

            //开始的时候获取本地存储，如果没有，置为[],否则获取

            var str = window.localStorage.getItem("userpass") || "[]";

            var userpass = JSON.parse(str);

            //注册功能实现

            resiger.onclick = function() {

                    //非空判断

                    var person = {

                        username: user.value,

                        password: pass.value

                    };

                    //需要判定用户名是否重复，如果重复，提示该用户名已被注册，并且return

                    //如果没有重复，就把他放入数组中

                    userpass.push(person);

                    console.log(userpass);

                    var str = JSON.stringify(userpass)

                    window.localStorage.setItem("userpass", str);

                }

                //登陆功能实现

            login.onclick = function() {

                var username = user.value;

                var password = pass.value;

                var flag = 0;

                for(var i = 0; i < userpass.length; i++) {

                    if(username == userpass[i].username && password == userpass[i].password) {

                        alert("欢迎" + username + ",登陆成功！");

                        return;

                    } else {

                        flag++;

                    }

                }

                if(flag == userpass.length) {

                    alert("登陆不成功");

                }

            }

            clear.addEventListener('click',function(){

                window.localStorage.clear();

            })

        </script>

    </body>

</html>

web储存用户信息的更多相关文章

  1. 1、JavaScript中的Cookie 用于存储 web 页面的用户信息。

    总结:每个浏览器都有一定数量限制的cookie.每个浏览器中,每一个cookie都有一个path路径,指向请求访问的网页. -------------------------------------- ...

  2. .NET 实现自定义ContextUser的Identity和Principal实现自定义用户信息，权限验证。

    备用收藏,http://blog.csdn.net/msdnxgh/article/details/6894885 .NET 实现自定义ContextUser的Identity和Principal 在 ...

  3. 在SharePoint中无代码开发InfoPath应用: 获取当前用户信息

    很多种不同的场景下,会需要得到当前的用户信息,例如需要根据当前用户判断组,进而控制权限. 首先InfoPath提供了一个userName方法,来实现这个目的,不过这个方法的问题是只能获得不包含域名的用 ...

  4. Redis 笔记与总结7 PHP + Redis 信息管理系统（用户信息的增删改查）

    1. PHP 连接 Redis 访问 redis 官方网站的 client 栏目:http://www.redis.io/clients#php,可以获取 redis 的 php 扩展. 其中 php ...

  5. [iOS微博项目 - 3.4] - 获取用户信息

    github: https://github.com/hellovoidworld/HVWWeibo   A.获取用户信息 1.需求 获取用户信息并储存 把用户昵称显示在“首页”界面导航栏的标题上   ...

  6. Discuz!NT3.6与网站整合（操作用户信息）解决方案

    因为网站要加个论坛,所以就用到了Discuz!NT3.6. 可惜目前官方论坛已经关闭,只有3.6版本的有源码,3.9的没有源码,不好操作,下载地址: http://download.comsenz.c ...

  7. 基于jsp+servlet图书管理系统之后台用户信息查询操作

    上一篇的博客写的是插入操作,且附有源码和数据库,这篇博客写的是查询操作,附有从头至尾写的代码(详细的注释)和数据库! 此次查询操作的源码和数据库:http://download.csdn.net/de ...

  8. 基于jsp+servlet图书管理系统之后台用户信息修改操作

    上一篇的博客写的是查询操作,且附有源码和数据库,这篇博客写的是修改操作,附有从头至尾写的代码(详细的注释)和数据库! 此次修改操作的源码和数据库:http://download.csdn.net/de ...

  9. [SAP] 外部系统调用SAP web service用户验证的简单方法

    场景: 一个Java系统调用SAP系统提供的web service,除了根据WSDL生成的代理类,调用相应方法,传入相应参数外,还等需要使用SAP提供的用户信息进行身份验证,最简单的方法是在soap请 ...

随机推荐

  1. mysql update 多表关联更新

    UPDATE new_schedules_spider_static_schedule s join new_scac_port p on p.`PORT` = s.`PORT` and p.SCAC ...

  2. gitlab文件夹的权限不要随便给777

    gitlab  权限给到777   不一定有用

  3. win 系统下制作U盘安装 linux系统

    win 系统制作U盘安装硬盘镜像用ultraiso_v9.5.3.2901将Centos.iso写进U盘.安装过程全程区分大小写.过低的ultraiso不能正确读取文件.本文所有资料均能在网上免费下载 ...

  4. 用纯CSS实现加载中动画效果

    HTML <div class="pswp__preloader__icn"> <div class="pswp__preloader__cut&quo ...

  5. OpenFaceswap 入门教程（1）：软件安装篇

    ---恢复内容开始--- 众多换脸软件中,DeepFaceLab其实是安装和使用最方便,更新最快的,但是由于其没有可是化界面,对于很新手来说,可能入门还是有点难度.那么今天就来介绍一款操作极其直观和简 ...

  6. 一个手机号可以注册绑定5个百度网盘,永久2T

    效果: 一个手机号可以注册绑定5个百度网盘,得永久2T硬盘 手机号只能做为其中一个网盘的登陆账号,其它四个用绑定qq登陆(微信应该也可以). 条件: 2个手机号:A(用来绑定百度网盘),B(用来申请网 ...

  7. Essential C++ 3.1 节的代码练习——指针方式

    // // PointerToValue.cpp // Working // // Created by Hawkins, Dakota Y on 6/3/16. // Copyright 2016 ...

  8. 用go和zk实现一个简单的分布式server

    golang的zk客户端 最近打算写个简单的配置中心,考虑到实现便捷性,语言选择了go,由于其中计划用到zk,就调研了下golang的zk客户端,并实现了个简单的分布式server.最终找到了两个,地 ...

  9. 小米r3g旧版开发版固件，安装opkg

    1.开启ssh 1.1.刷入固件 在路由器更新界面,刷入 miwifi_r3g_firmware_c2175_2.25.122.bin 固件 下载地址: http://bigota.miwifi.co ...

  10. easyui-numberbox限定仅输入数字

    许多必填项都涉及到数字,比如电话号码,身份证号这些要求用户在输入时只能输入数字.Easyui提供了数字框控件,允许用户只输入数字, <td> <input id="ssd& ...