<!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. CSS3和动画

    定位: z-index叠层    数字越大越往上层 注意:要用z-index属性必须设position属性 溢出:overflow 属性值:visible    不剪切内容也不添加滚动条 Auto   ...

  2. Bootstrap 折叠(collapse)插件面板

    折叠插件(collapse)可以很容易地让页面区域折叠起来, 无论您是用它来创建折叠导航还是内容面板,它都允许很多内容选项. 您可以使用折叠插件 1.创建可折叠的分组或折叠的面板 <!DOCTY ...

  3. linux网络编程之断点传输文件

    以下载链接"http://www.boa.org/boa-0.94.13.tar.gz"为例: 断点续传实验大概步骤: ===================== 1,使用geth ...

  4. JDK和CGLIB动态代理原理区别

    JDK和CGLIB动态代理原理区别 https://blog.csdn.net/yhl_jxy/article/details/80635012 2018年06月09日 18:34:17 阅读数:65 ...

  5. （76）zabbix_agentd.conf配置文件详解

    ############ GENERAL PARAMETERS ################# ### Option: PidFile# Name of PID file.# Agent PID文 ...

  6. PKI

    公钥基础设施(Public Key Infrastructure,简称PKI)是眼下网络安全建设的基础与核心,是电子商务安全实施的基本保障,因此,对PKI技术的研究和开发成为眼下信息安全领域的热点.本 ...

  7. 微信小程序中 this.setData is not a function报错

    在微信小程序中我们一般通过以下方式来修改data中的数据: 比如获取小程序缓存: wx.getStorage({ key: 'is_screen', success: function (res) { ...

  8. 3分钟快速了解FastDFS

    1.介绍 FastDFS是一个C语言写的阿里开源的分布式文件存储服务器主要由两部分组成:1.Tracker server ——————主要负责调度和追踪Storage状态(调度服务器),默认监听端口: ...

  9. TCP/IP网络编程之多种I/O函数

    send和recv函数 在之前的学习中,我们在不少示例中用到send和recv这两个函数,但一直没有详细解释过着两个函数中每个参数的含义.本节将介绍Linux平台下的send&recv函数 # ...

  10. js 监听后退事件及跳转页面

    //直接跳转 window.location.href="b.html"; //返回上一级页面 window.history.back(-1); //返回下一级页面 window. ...