<!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. MySQL的一些知识。

    新MySQL而言:对于myisam引擎的表select默认是会锁定该表(共享锁)的 ,会导致其他操作挂起,处于等待状态.对于innodb引擎的表select默认是不会锁表(也不会锁行,简而言之就是不加 ...

  2. (转)springMVC+mybatis+ehcache详细配置

    一. Mybatis+Ehcache配置 为了提高MyBatis的性能,有时候我们需要加入缓存支持,目前用的比较多的缓存莫过于ehcache缓存了,ehcache性能强大,而且位各种应用都提供了解决方 ...

  3. iOS 字符串删除 DOM

    iOS  string 删除 包含的 DOM NSMutableString *mutableString = [NSMutableString stringWithString:responseSt ...

  4. java的remote shell

    http://www.ganymed.ethz.ch/ssh2/ 此程序的目的是执行远程机器上的Shell脚本. [环境参数] 远程机器IP:172.17.24.212 用户名:root 密码:zhe ...

  5. js对象克隆方法

    方法1: function clone(obj){ var o; switch(typeof obj){ case 'undefined': break; case 'string' : o = ob ...

  6. jQuery判断checked的三种方法

    今天在查看他人源码时看到在判断复选框是否选中时,与自己的写法不同: .is(":checked") vs .prop("checked") == true 因此 ...

  7. VS自定义项目模板：[2]创建VSIX项目模板扩展

    VS自定义项目模板:[2]创建VSIX项目模板扩展 听语音 | 浏览:1237 | 更新:2015-01-02 09:21 | 标签:软件开发 1 2 3 4 5 6 7 分步阅读 一键约师傅 百度师 ...

  8. C++-Qt【2】-实现一个简单的记事本

    用Qt实现一个简单的记事本: #include "helloqt.h" #include <qfiledialog.h> #include <qfile.h> ...

  9. display:table-cell

    布局神器display:table-cell Author:owenhong2015-06-17 随着时间的推进,ie6.ie7在中国浏览器市场的占有率越来越低的情况,我现在工作的团队,经过用户访问数 ...

  10. VB6+Winsock编写的websocket服务端

    早就写好了,看这方面资料比较少,索性贴出来.只是一个DEMO中的,没有做优化,代码比较草.由于没地方上传附件,所以只把一些主要的代码贴出来. 这只是服务端,不过客户端可以反推出来,其实了解了webso ...