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. 基于nginx tomcat redis分布式web应用的session共享配置

    一.前言 nginx 作为目前最流行的开源反向代理HTTP Server,用于实现资源缓存.web server负载均衡等功能,由于其轻量级.高性能.高可靠等特点在互联网项目中有着非常普遍的应用,相关 ...

  2. FlyCapture2 fc2Image OpenCV IplImage Conversion 两种图像格式之间的转换

    fc2Image是FlyCapture SDK的C语言库中的图片格式,由于在Windows上的MinGW无法编译FlyCapture2的C++库,只能使用C语言库,所以当我们在同时使用OpenCV的图 ...

  3. HTML&CSS----练习隐藏导航栏（初级）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. elFinder的使用并整合ckeditor

    具体实现访问: 白乔大神资源:https://github.com/bluejoe2008/elfinder-2.x-servlet 本人oschina的库:https://git.oschina.n ...

  5. 【iBoard电子学堂开发板例程】【12个 stm32 例程发布】

    _____________________________________ 深入交流QQ群: A: 204255896(1000人超级群,可加入) B: 165201798(500人超级群,满员) C ...

  6. php一些技巧函数

    current() next() prev() 范例 <?php $people = array("Peter", "Joe", "Glenn& ...

  7. Memcached 笔记与总结（5）Memcached 的普通哈希分布和一致性哈希分布

    普通 Hash 分布算法的 PHP 实现 首先假设有 2 台服务器:127.0.0.1:11211 和 192.168.186.129:11211 当存储的 key 经过对 2 (2 台服务器)取模运 ...

  8. Javascript 笔记与总结（2-8）对象2

    注意:标签属性与 DOM 对象属性的对应关系,绝大部分 2 者是相同的,例如 imgobj.src 属性对应 <img src=""> 中的 src 属性 例外:< ...

  9. PHP 开发 APP 接口 学习笔记与总结 - APP 接口实例 [4] 首页 APP 接口开发方案 ③ 定时读取缓存方式

    用于 linux 执行 crontab 命令生成缓存的文件 crop.php <?php //让crontab 定时执行的脚本程序 require_once 'db.php'; require_ ...

  10. 使用VirtualEnvWrapper隔离python项目的库依赖

    是什么 VirtualEnv用于在一台机器上创建多个独立的python运行环境,VirtualEnvWrapper为前者提供了一些便利的命令行上的封装. 为什么要用 - 隔离项目之间的第三方包依赖,如 ...