LocalStorage记住用户和密码功能


Posted in HTML / CSS onJuly 24, 2017

 随着HTML5规范的普及,我们不再用cookie来实现记住密码,通常会用的LocalStorage及本地缓存。

    对于Cookie来说它只有一个document.cookie这一个API可以使用,不管是读取Cookie还是存储Cookie你都只能使用它

    然而LocalStorage,你存储的时候有localStorage.setItem(),你读取的时候有localStorage.getItem(),你想要删除的时候有localStorage.removeItem().此外在存储时,它们事以键值对的形式存储的.所以更易于使用.并且localStorge的储存空间大,有5M,并且是永久储存,除非你主动删除。

下面附一个简单的小例子:

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
   <form>
        <h3>Log in</h3>
        <input type="text" name="user" placeholder="user" id="user">
        <input type="password" name="pass" placeholder="password" id="pass">
        <input type="checkbox" id="remember" checked><br/><br/>
        <input type="button" value="登录" id="sub" onclick="loginBtn_click()">
    </form>
<script type="text/javascript">
    $(document).ready(function(){
        var strName = localStorage.getItem('UserName');
        var strPass = localStorage.getItem('UserPass');
        if(strName){
            $('#user').val(strName);
        }if(strPass){
            $('#pass').val(strPass);
        }
    });
    function loginBtn_click(){
        debugger
            var strName = $('#user').val();
            var strPass = $('#pass').val();
            localStorage.setItem('UserName',strName);
            if($('#remember').is(':checked')){
                localStorage.setItem('UserPass',strPass);
            }else{
                localStorage.removeItem('UserPass');
            }
            window.location.reload();
        }
</script>

总结

以上所述是小编给大家介绍的LocalStorage记住用户和密码功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
利用css3 translate完美实现表头固定效果
Feb 28 HTML / CSS
CSS3 网页下拉菜单代码解释 中文翻译
Feb 27 HTML / CSS
浅析几个CSS3常用功能的写法
Jun 05 HTML / CSS
css3 伪元素和伪类选择器详解
Sep 04 HTML / CSS
CSS3实现同时执行倾斜和旋转的动画效果
Oct 27 HTML / CSS
css3实现蒙版弹幕功能
Jun 18 HTML / CSS
详解HTML5表单新增属性
Dec 21 HTML / CSS
HTML5本地存储之Database Storage应用介绍
Jan 06 HTML / CSS
HTML5 LocalStorage 本地存储刷新值还在
Mar 10 HTML / CSS
html5如何在Canvas中实现自定义路径动画示例
Sep 18 HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
Apr 23 HTML / CSS
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
May 07 HTML / CSS
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
Jul 24 #HTML / CSS
H5调用相机拍照并压缩图片的实例代码
Jul 20 #HTML / CSS
h5实现获取用户地理定位的实例代码
Jul 17 #HTML / CSS
HTML5 表单验证失败的提示语问题
Jul 13 #HTML / CSS
HTML5地理定位_动力节点Java学院整理
Jul 12 #HTML / CSS
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
Jul 11 #HTML / CSS
html5组织内容_动力节点Java学院整理
Jul 10 #HTML / CSS
You might like
老照片 - 几十年前的收音机与人
2021/03/02 无线电
PHP4在WinXP下IIS和Apache2服务器上的安装实例
2006/10/09 PHP
Thinkphp中的volist标签用法简介
2014/06/18 PHP
php开发中的页面跳转方法总结
2015/04/26 PHP
日常整理PHP中简单的图形处理(经典)
2015/10/26 PHP
浅析javascript操作 cookie对象
2014/12/26 Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
2016/09/27 Javascript
基于Vue实现图书管理功能
2017/10/17 Javascript
浅谈JsonObject中的key-value数据解析排序问题
2017/12/06 Javascript
JS设计模式之策略模式概念与用法分析
2018/02/05 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
2018/04/03 Javascript
JavaScript 下载svg图片为png格式
2018/06/21 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
2018/08/02 Javascript
微信小程序实现写入读取缓存详解
2019/08/30 Javascript
微信头像地址失效踩坑记附带解决方案
2019/09/23 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
2020/12/09 Javascript
[02:02:38]VG vs Mineski Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
[02:53]2018年度DOTA2最佳战队-完美盛典
2018/12/17 DOTA
Django中实现一个高性能计数器(Counter)实例
2014/07/09 Python
Python简单生成8位随机密码的方法
2017/05/24 Python
Python AES加密实例解析
2018/01/18 Python
python统计字母、空格、数字等字符个数的实例
2018/06/29 Python
python训练数据时打乱训练数据与标签的两种方法小结
2018/11/08 Python
Python对Excel按列值筛选并拆分表格到多个文件的代码
2019/11/05 Python
keras训练曲线,混淆矩阵,CNN层输出可视化实例
2020/06/15 Python
HTML5的Geolocation地理位置定位API使用教程
2016/05/12 HTML / CSS
Nike英国官网:Nike.com (UK)
2017/02/13 全球购物
为什么要做架构设计
2015/07/08 面试题
校庆筹备方案
2014/03/30 职场文书
领导干部对照检查材料
2014/08/24 职场文书
2014年药店店长工作总结
2014/11/17 职场文书
给老师的一封感谢信
2015/01/20 职场文书
承诺函格式模板
2015/01/21 职场文书
宝宝满月祝酒词
2015/08/10 职场文书
vue中 this.$set的使用详解
2021/11/17 Vue.js
Golang bufio详细讲解
2022/04/21 Golang