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. 用edtftpj实现Java FTP客户端工具

    edtftpj是一个java FTP工具包,使用非常方便,感觉比Apache的好用,但Apache更灵活.edtftpj有多种版本,分别是java..net和js版本.对于Java版的有一个免费版本. ...

  2. Html - 瀑布流

    瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早采用此布局的网站是Pinterest,逐渐 ...

  3. 是否允许处理由Zend Encoder加密的PHP文件

    Zend Optimizer是由PHP核心引擎"Zend"创建者Zend技术公司所开的免费PHP优化软件.据Zend公司透露使用这个软件某些情况下至少可以提高性能30%以上!Zen ...

  4. Beetl2.2使用说明书20151201

    李家智<xiandafu@126.com> Table of Contents 1. 什么是Beetl 2. 基本用法 2.1. 从GroupTemplate开始 2.2. 模板基础配置 ...

  5. redis之如何配置jedisPool参数

      JedisPool的配置参数很大程度上依赖于实际应用需求.软硬件能力,JedisPool的配置参数大部分是由JedisPoolConfig的对应项来赋值的.   maxActive:控制一个poo ...

  6. yum安装 lnmp

    yum nginx是不行的 so,制作一个repo vi /etc/yum.repos.d/nginx.repo 写上 CentOS: [nginx] name=nginx repo baseurl= ...

  7. 前端CSS参考阅读

    CSS 2.2 W3标准 http://dev.w3.org/csswg/css2/ CSS2 中文翻译 http://files.cnblogs.com/files/mize/CSS2_Chines ...

  8. [学点英语]扎克伯格给女儿的信，translation of zucherber's letter to her daughter( Chinese version)

    A letter to our daughter 扎克伯格写给女儿的信   Mark Zuckerberg·Tuesday, December 1, 2015 Dear Max, 亲爱的玛克斯 You ...

  9. 每天学点GDB 15

    本节重点描述两个gdb集成测试环境 有没有办法在一边调试的时候,一边显示对应的源码呢?有没有一种工具能够将gdb集成到ide中呢,本文就试图回答这些问题. emacs gdb 在linux的世界里,e ...

  10. fortran中如何提供计算程序运行时间？

    如下: Real time_begin , time_end1 , time_end2 Integer i , j call CPU_TIME(time_begin) write(*,*) time_ ...