<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <title></title>

        <script src="js/mui.min.js"></script>

        <link href="css/mui.min.css" rel="stylesheet" />

        <script type="text/javascript" charset="utf-8">

            mui.init();

        </script>

        <style>

            body {

                margin-left: 500px;

            }

            fieldset {

                width: 380px;

                height: 220px;

                text-align: center;

            }

            #txtId,

            #txtPwd {

                width: 240px;

                margin: 10px auto;

            }

        </style>

    </head>

    <body>

        <fieldset id="">

            <legend>用户登录</legend>

            用户名：<input type="text" id="txtId" /><br /> &nbsp;&nbsp;&nbsp;

            密码：<input type="password" id="txtPwd" /><br />

            <input type="checkbox" id="chkRem" />记住密码<br />

            <input type="button" value="登录" onclick="remPwd()" />

        </fieldset>

        <script type="text/javascript">

            var Id = localStorage.getItem("txtId");

            if(Id != null) //如果缓存中有数据，则加载出来

            {

                document.getElementById("txtId").value = Id;

                document.getElementById("txtPwd").value = localStorage.getItem("txtPwd");

                document.getElementById("chkRem").checked = "checked";

            }

            //将账号与密码保存到Localstore

            function remPwd() {

                var check = document.getElementById("chkRem");

                if(check.checked) //判断记住密码项是否勾选，是则记住密码到本地缓存

                {

                    var id = document.getElementById("txtId").value;

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

                    localStorage.setItem("txtId", id);

                    localStorage.setItem("txtPwd", pwd);

                } else //否则就移除本地缓存

                {

                    localStorage.removeItem("txtId");

                    localStorage.removeItem("txtPwd");

                }

            }

        </script>

    </body>

</html>

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　--老白菜原创

2016/11/16 周三 <使用LocalStore记住用户密码方法示例>的更多相关文章

  1. 2016/11/16 周三 <Web SQL Database基本使用方法（入门） >

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. html 5 本地数据库（Web Sql Database）核心方法openDatabase、transaction、executeSql 详解

    Web SQL数据库API实际上不是HTML5规范的组成部分,而是单独的规范.它通过一套API来操纵客户端的数据库.Safari.Chrome. Firefox.Opera等主流浏览器都已经支持Web ...

  3. HTML5 学习笔记（三）——本地存储(LocalStorage、SessionStorage、Web SQL Database)

    一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...

  4. 前端存储之Web Sql Database

    前言 在上一篇前端存储之indexedDB中说到,我们项目组要搞一个前后端分离的项目,要求在前端实现存储,我们首先找到了indexedDB,而我们研究了一段时间的indexedDB后,发现它并不是很适 ...

  5. HTML5教程之html 5 本地数据库（Web Sql Database）

    HTML5的Web SQL Databases(html5 本地数据库)的确很诱惑人,当你发现可以用与mysql查询一样的查询语句来操作本地数据库时,你会发现这东西挺有趣的.今天,我们一起来了解HTM ...

  6. HTML5本地存储——Web SQL Database

    在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数据就 ...

  7. web sql database数据存储位置

    Q1: 数据存储在哪儿? Web Storage / Web SQL Database / Indexed Database 的数据都存储在浏览器对应的用户配置文件目录(user profile di ...

  8. 阿伦学习html5 之Web SQL Database

    不知道什么情况, W3C不再维护web SQL Database规范,但是大多浏览器都支持了! Web SQL Database规范页面有着这样的声明 Web SQL Database 规范中定义的三 ...

  9. 【HTML5】HTML5本地数据库（Web Sql Database）

    Web Sql数据库简介 Web SQL数据库API实际上不是HTML5规范的组成部分,而是单独的规范.它通过一套API来操纵客户端的数据库. Web SQL数据库的浏览器支持情况 Web SQL 数 ...

随机推荐

  1. 处理Https 异常记录 javax.net.ssl.SSLHandshakeException: Received fatal alert: handshake_failure

    http://blog.csdn.net/baidu_18607183/article/details/51595330 https://blogs.oracle.com/java-platform- ...

  2. java回调机制

    http://www.cnblogs.com/heshuchao/p/5376298.html

  3. 【Java EE 学习 69 中】【数据采集系统第一天】【SSH框架搭建】

    经过23天的艰苦斗争,终于搞定了数据采集系统~徐培成老师很厉害啊,明明只是用了10天就搞定的项目我却做了23天,还是模仿的...呵呵,算了,总之最后总算是完成了,现在该好好整理该项目了. 第一天的内容 ...

  4. CSS布局经典—圣杯布局与双飞翼布局

    在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...

  5. 【Android】一道Android OpenGL笔试题

    一道Android OpenGL笔试题 SkySeraph May. 5th 2016 Email:skyseraph00@163.com 更多精彩请直接访问SkySeraph个人站点:www.sky ...

  6. 私有无线传感网 PWSN HLINK

    私有无线传感网,我把其叫做 Personal Wireless Sensor Network.此种网络最另众人所知的就是ZIGBEE了.由于在用户不同的使用场景中,对传感网络有许多不同的要求,例如:通 ...

  7. 移动适配请使用比rem等更好的布局方案

      移动端大行其道,rem/em.百分比.响应式方案更是层出不穷,看见周围的伙伴们都在对使用rem和百分比情有独钟,可我却偏不爱,之所以出现如此多的方法,其目的只有一个屏幕适配.   屏幕适配顾名思义 ...

  8. react native 键盘遮挡按钮点击事件

    在做项目的时候,我遇到一个很奇怪的问题,我先描述一下问题,在InputText输入内完成以后,点击按钮进行下一步的操作的时候,第一次点击的时候,按钮没有响应,第二次点击的时候才会响应.这样对用户体验有 ...

  9. 1208PHP基础

    PHP是一种创建动态交互性站点的强有力的服务器端脚本语言(后端.弱类型) 从地址栏直接寻找:localhost/路径/路径PHP语法:PHP脚本以<?php 开始,以?>结束; PHP文件 ...

  10. Web Mercator 公开的小秘密

    网上已经有好多作者都不吝笔墨,写了好多有关 Web Mercator这个坐标系的前世今生.多搜罗多摄入,我们会得到很多有用的信息.今天讨论到 3758,3857,102100,900913-- 这些I ...