1. 存储计数器的值

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<div id="div1">0</div><br>

<input id="btn" value="计数" type="button">

<script>

    window.onload = function(){

        var div = document.getElementById("div1");

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

        var num = localStorage.getItem("num") ? localStorage.getItem("num") : 0;

        div.innerHTML = num +"";

        btn.onclick = function(){

            num ++;

            localStorage.setItem("num",num);

            div.innerHTML = localStorage.getItem("num") +"";

        }

    }

</script>

</body>

</html>

1.2 简化

<script>

    window.onload = function(){

        var div = document.getElementById("div1");

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

        var num = localStorage.getItem("num") || 0;

        div.innerHTML = num;

        btn.onclick = function(){

            num++;

            div.innerHTML = num;

            localStorage.setItem("num",num);

        }

    }

</script>

2. 校验用户名和密码

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

账号:<input type="text" id="account"><br>

密码:<input type="text" id="pwd"><br>

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

<p id="info"></p>

<br><br><br><br><br><br><br><br><br><br><br>

<script>

    window.onload = function(){

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

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

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

        var info = document.getElementById("info"); //展示结果用, 登录成功或登录失败!

        var user = [ // 存入数据库的数据(模拟)

            {'account': 'liuting', 'pwd': '123'},

            {'account': 'zhangsan', 'pwd': '456'},

            {'account': 'lisi', 'pwd': '789'},

            {'account': 'wangwu', 'pwd': 'jqk'},

            {'account': 'wanger', 'pwd': 'abc'},

            {'account': 'mazi', 'pwd': 'abc123'}

        ];

        //1. 保存数据到数据库 并从数据库中获取用户信息

        var index = 0; // 保证存入的key的唯一性

        var arrUser = []; //获取所有本地用户

        for(var i = 0, len = user.length; i < len; i++){ //把所有的模拟的用户保存到数据库并 从数据库获取所有的用户信息

            localStorage.setItem('account'+ index, user[i]['account']);

            localStorage.setItem('pwd'+ index, user[i]['pwd']);

            var userSave = {};

            userSave['account'] = localStorage.getItem('account'+ index);

            userSave['pwd'] = localStorage.getItem('pwd'+ index);

            arrUser[index] = userSave;

            index++;

        }

        //2. 点击登录按钮的时候 进行账号和密码校验

        login.onclick = function(){

            if(arrUser){

                for(var i = 0, len = arrUser.length; i < len; i++) {

                    //如果前台输入的账号和密码与数据库中的账号和密码一致则登录成功!反之失败!

                    if(account.value == arrUser[i]['account'] && pwd.value == arrUser[i]['pwd']) {

                        info.style.color = 'green';

                        info.innerHTML = "登录成功!"

                        return; // 跳转到首页

                    }else {

                        info.style.color = 'red';

                        info.innerHTML = "账号或密码有误!请重新输入!"

                    }

                }

            }else {

                info.style.color = 'red';

                info.innerHTML = "数据库中没有数据";

            }

        }

    }

</script>

</body>

</html>

H5 -- 本地存储计数器的值 和前端校验用户的更多相关文章

  1. H5本地存储详细使用教程（localStorage + JSON数据存储应用框架）

    一.Web Storage教程 1.概述: 对于Web Storage来说,实际上是Cookies存储的进化版.如果了解Cookie的人几乎一看Web Storage就会用,如果你从来没用过没了解过C ...

  2. H5本地储存Web Storage

    一.本地存储由来的背景 由于HTML4时代Cookie的大小.格式.存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie.但是Cookie的这些限制,也就导致了C ...

  3. 微服务架构 - 搭建docker本地镜像仓库并提供权限校验及UI界面

    搭建docker本地镜像仓库并提供权限校验及UI界面 docker本地镜像仓库的作用跟maven私服差不多,特别是公司级或者是小组级开发好的docker仓库可以上传到本地镜像仓库中,需要用时,直接从本 ...

  4. 利用H5本地存储localStorage、sessionStorage

    最近的业务处理上,要使用cookie缓存储一下数据,公司的cookie还搞出点问题.而用户的浏览器都是利用微信的内置,普遍支持h5的本地存储.于是利用了这个... 现代浏览器普遍开始支持H5本地存储, ...

  5. 解析H5本地储存Web Storage

    一.本地存储由来的背景 由于HTML4时代Cookie的大小.格式.存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie.但是Cookie的这些限制,也就导致了C ...

  6. h5 本地存储

    H5本地存储有两个API,一个是Web Storage,还有一个是Web SQL.不管是哪一个,都是基于JavaScript语言来使用,接下来我就教你怎么使用H5本地存储,本文篇幅较大,JS代码较多, ...

  7. H5本地存储详解

    H5之前存储数据一般是通过 cookie ,但是 cookie 存的数据容量比较少.H5 中扩充了文件存储能力,可存储多达 5MB 的数据.现在就实际开发经验来对本地存储 ( Storage ) 的使 ...

  8. H5本地存储：sessionStorage和localStorage

    作者:心叶时间:2018-05-01 18:30 H5提供了二种非常好用的本地存储方法:sessionStorage和localStorage,下面分别介绍一下: 1.sessionStorage:保 ...

  9. h5本地缓存（localStorage，sessionStorage）

    H5本地存储数据 localStorage,sessionStorage的区别: 相同点:  缓存数据比cookie的范围大; localStorage:关闭浏览器数据不会消失,除非手动删除数据 se ...

随机推荐

  1. 【BZOJ】1146: [CTSC2008]网络管理Network（树链剖分+线段树套平衡树+二分 / dfs序+树状数组+主席树）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1146 第一种做法(时间太感人): 第二种做法(rank5,好开心) ================ ...

  2. hiho 光棍节

    描述 尽管付出了种种努力,jzp还是得过光棍节. jzp非常不爽,但也无能为力,只能够哀叹起来他的命运.他想到了一位长者的人生经验:“人的一生,不光要靠自我奋斗,也要考虑历史的进程”. 他终于明白自己 ...

  3. @JSON(serialize=false)，过滤不需要的变量

    @JSON(serialize=false),过滤不需要的变量   在用struts2返回json类型的数据时,json会自动转换需要转换成json形式的变量,如果哪个变量不需要的话,则可以在该变量的 ...

  4. 分享到QQ空间代码(一)

    如何给自己的网站添上"分享到QQ空间"的功能? 只要选择以下代码嵌入自己的网页,即可将网站的信息分享到QQ空间

  5. 结合计划任务每天从Symantec官网下载离线病毒库

    #三种方法,由初级到高级 $numbers = 1..40 | Foreach {"{0:D3}" -f $_} #将数字类型格式化并转换为字符串类型使用-f字符串操作符 ForE ...

  6. apache日志文件太大的问题

    apache日志文件太大的问题 处理Apache日志的两种方法 rotatelogs 是 Apache 2.2 中自带的管道日志程序 rotatelogs [ -l ] logfile [ rotat ...

  7. [IT新应用]如何部署CITRIX 虚拟桌面

    1.搭建AD,并部署dhcp. 2.安装ddc服务器,加入域.这台服务器就是用来发布后端服务器或者WIN7的PC给用户使用.相当于调度. 3.安装windows server或者win7,用于发布给用 ...

  8. Apache Storm 衍生项目之2 -- Trident-ML

    欢迎转载,转载请注明出处,徽沪一郎,谢谢. 楔子 或许谈起storm是大数据实时计算框架已经让你不明觉厉,如果说storm还可以跟机器学习算法(ml)有机的结合在一起,是不是更加觉着高大尚呢.trid ...

  9. wordpress 添加自定义菜单到管理面板（wp-admin)

    如果你在做 wordpress 主题或插件的开发,通常需要在后台dashboard管理面板添加菜单方便用户做主题设置或插件设置.这篇文章要讨论的问题就是怎么样加这个菜单,加在哪里? 添加顶级菜单项 a ...

  10. 20145317彭垚 《Java程序设计》第6周学习总结

    20145317彭垚 <Java程序设计>第6周学习总结 第十章 输入/输出 10.1 InputStream与OutputStream 1.串流设计的概念 Java将输入/输出抽象化为串 ...