<!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. python读取txt写入txt

    http://www.cnblogs.com/allenblogs/archive/2010/09/13/1824842.html

  2. react的constructor和super的具体含义和使用

    1.constructor( )-----super( )的基本含义 这是ES6对类的默认方法,通过 new 命令生成对象实例时自动调用该方法.并且,该方法是类中必须有的,如果没有显示定义,则会默认添 ...

  3. Android驱动开发读书笔记六

    第六章 Linux 驱动的工作和访问方式是 Linux 的亮点之一,Linux 系统将每一个驱动都映射成一个文件.这些文件称为设备文件或驱动文件,都保存在/dev目录中,由于大多数Linux驱动都有与 ...

  4. java中char类型转换成int类型的两种方法

    方法一: char ch = '9'; if (Character.isDigit(ch)){ // 判断是否是数字 int num = Integer.parseInt(String.valueOf ...

  5. BZOJ1576: [Usaco2009 Jan]安全路经Travel(最短路 并查集)

    题意 给你一张无向图,保证从1号点到每个点的最短路唯一.对于每个点求出删掉号点到它的最短路上的最后一条边(就是这条路径上与他自己相连的那条边)后1号点到它的最短路的长度 Sol emmm,考场上想了个 ...

  6. Emgu.CV.CvInvoke的类型初始值设定项引发异常

    被这个问题蛋疼了一个下午,终于解决了.我的服务器出现这个问题的原因:可能是没有安装emgucv. 解决方法: 1.下载并安装emgucv 下载地址:链接: https://pan.baidu.com/ ...

  7. 列举Asp.net页面之间传递值的几种方式和优缺点？

    一.QueryString变量 优点:使用简单,对于安全性要求不高时传递数字或是文本值非常有效. 缺点:缺乏安全性,由于它的值暴露在浏览器的URL地址中的:不能传递对象. 二. 使用Applicati ...

  8. Fakeapp 入门教程（3）：参数篇

    参数可以让软件自由度更高.Fakeapp的参数并不算多,但是也非常使用.本文就讲解下几个重要的参数.参数设置界面可以通过点击SETTINGS打开. 参数修改无需点击保存,一旦修改直接生效. Proce ...

  9. 线程之sleep()，wait(),yield(),join()等等的方法的区别

    操作线程的常用方法大体上有sleep(),join(),yield()(让位),wait(),notify(),notifyAll(),关键字synchronized等等.    由于这些方法功能有些 ...

  10. vscode运行C/C++程序及配置

    安装vscdoe,安装tdm-gcc-64编译器,这样可以自动把mingw的目录添加到环境变量中,其实安装其他编译器本版都可以,只要手动添加环境变量即可.平台win10-64位.此文参考了哔哩哔哩的配 ...