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. Google Code Jam 2010 Round 1B Problem A. File Fix-it

    https://code.google.com/codejam/contest/635101/dashboard#s=p0   Problem On Unix computers, data is s ...

  2. 基于HTML5实现的超酷摄像头（HTML5 webcam）拍照功能 - photobooth.js

    在线演示 WebRTC可能是明年最受关注的HTML5标准了,Mozilla为此开发了一套帮助你控制硬件的API,例如,摄像头,麦克风,或者是加速表.你可以不依赖其它的插件来调用你需要的本机硬件设备. ...

  3. c++模版函数

    1.定义 可以使用class或者typename字段来申明 template <class T> template <class T1, class T2, ...class TN& ...

  4. jquery限制div字符长度，超出部分已“…”显示

    $(".content").each(function(){ if($(this).text().length>100){ $(this).text($(this).text ...

  5. cookiecutter-flask生成的框架里边自带了一个CRUDMixin类

    单元测试的必要性 之前曾经写过一篇讲单元测试的,正好最近也在实践和摸索.我似乎有种洁癖,就是我会严格遵守流程性的东西,比如测试,注释和文档等.目前就职的公司在我接手项目的时候是没有一行单元测试的,我挺 ...

  6. cms 二级域名修改信息

    \CMS\Collect\PageRes.cs _content = _content.Replace(r.orgurl, newurl); _content = _content.Replace(r ...

  7. Robocopy

    用法: http://technet.microsoft.com/zh-cn/library/cc733145%28v=ws.10%29.aspx   图形化工具: http://sourceforg ...

  8. 使用Eclipse自带Web Service插件(Axis1.4)生成Web Service服务端/客户端

    创建一个名字为math的Java web工程,并将WSDL文件拷入该工程中 将Axis所需的jar包拷贝至WebRoot\WEB-INF\lib目录下,这些jar包会自动导入math工程中 一,生成W ...

  9. GIT: 远程建立一个仓库，然后复制到本地

    1. 登录  GIT,创建一个新的仓库 gitskills 2. 创建的时候,要选择 Initialize this repository with a readme ,让GitHub初始化仓库 3. ...

  10. JavaWEB前端向服务器端发送对象

    最近项目中需要做一个关于批量删除的功能,删除条件有多个,需要从页面全部传给后台服务器程序,单个的删除,可以拼接参数给url,服务器端获取参数后执行删除操作即可.但是批量删除多个,参数会很多,传递就有些 ...