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. 【POJ】1228 Grandpa's Estate（凸包）

    http://poj.org/problem?id=1228 随便看看就能发现,凸包上的每条边必须满足,有相邻的边和它斜率相同(即共线或凸包上每个点必须一定在三点共线上) 然后愉快敲完凸包+斜率判定, ...

  2. JS模态窗口返回值兼容问题解决方案

    因系统要兼容原IE已使用的关闭方法,经调试测得,需对window.dialogArguments进行再较验,不然易出问题. function OKEnd(vals) { if (vals == nul ...

  3. Centos 中安装Java

    http://www.oracle.com/technetwork/java/javasebusiness/downloads/java-archive-downloads-javase6-41940 ...

  4. 【C语言】08-数组

    为了让大家更好地学习和理解数组,我们先来认识一下内存中的"地址". 地址 1.计算机中的内存是以字节为单位的存储空间.内存的每一个字节都有一个唯一的编号,这个编号就称为地址.凡存放 ...

  5. NSOperationQueue

    一.简介 一个NSOperation对象可以通过调用start方法来执行任务,默认是同步执行的.也可以将NSOperation添加到一个NSOperationQueue(操作队列)中去执行,而且是异步 ...

  6. smarty模板中引用常量没效果

    在thinkphp框架中使用Thinkph的模板引擎,css,js等都没问题,配置为smarty模板引擎后没效果,如图 代码为,$Smarty的s是大写,此时页面不能引入常量,改为小写后正常了. &l ...

  7. MySQL中的datetime与timestamp比较-------转载

    原文地址http://database.51cto.com/art/200905/124240.htm MySQL中的datetime与timestamp比较 本文将通过实例比较MySQL中的date ...

  8. JDBC连接执行 MySQL 存储过程报权限错误：User does not have access to metadata required to determine stored procedure parameter types. If rights can not be granted,

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html 内部邀请码:C8E245J (不写邀请码,没有现金送) 国 ...

  9. 找1到n所有整数出现1的个数

    编程之美2.4 n=12时,1,11,12这3个数包含1,所以1的个数是5. Line 9是为了防止factor溢出. #include <iostream> #include <s ...

  10. css 细节收集

    细节1……………………………………………………………………………… 一.当文字与图片在一行,需要将文字与图片底对齐,需要这样写: <li>记住密码<img src="&qu ...