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动画过渡实现鼠标跟随导航效果
Feb 08 HTML / CSS
利用纯css3实现的文字亮光特效的代码演示
Nov 27 HTML / CSS
HTML5的革新 结构之美
Jun 20 HTML / CSS
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
Jan 30 HTML / CSS
HTML5 Video标签的属性、方法和事件汇总介绍
Apr 24 HTML / CSS
关于HTML5语义标签的实践(blog页面)
Jul 12 HTML / CSS
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
Dec 15 HTML / CSS
HTML5中的websocket实现直播功能
May 21 HTML / CSS
canvas探照灯效果的示例代码
Nov 30 HTML / CSS
用canvas做一个DVD待机动画的实现代码
Apr 12 HTML / CSS
HTML5中的Web Notification桌面通知功能的实现方法
Jul 29 HTML / CSS
如何使用 resize 实现图片切换预览功能
Aug 23 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/03 新手入门
修改Zend引擎实现PHP源码加密的原理及实践
2008/04/14 PHP
php根据年月获取季度的方法
2014/03/31 PHP
php制作动态随机验证码
2015/02/12 PHP
php数组添加与删除单元的常用函数实例分析
2015/02/16 PHP
PHP会员找回密码功能的简单实现
2016/09/05 PHP
ecshop添加菜单及权限分配问题
2017/11/21 PHP
js获取提交的字符串的字节数
2009/02/09 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
2012/10/15 Javascript
jQuery获得内容和属性方法及示例
2013/12/02 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
2015/09/27 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
2017/01/08 Javascript
vue实现单选和多选功能
2017/08/11 Javascript
微信小程序之页面跳转和参数传递的实现
2017/09/29 Javascript
Nodejs连接mysql并实现增、删、改、查操作的方法详解
2018/01/04 NodeJs
react native 获取地理位置的方法示例
2018/08/28 Javascript
微信小程序带动画弹窗组件使用方法详解
2018/11/27 Javascript
使用NestJS开发Node.js应用的方法
2018/12/03 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
2019/04/15 Javascript
vue的三种图片引入方式代码实例
2019/11/19 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
2019/12/17 Javascript
[05:13]TI4 中国战队 机场出征!!
2014/07/07 DOTA
[04:03]DOTA2英雄梦之声_第02期_风暴之灵
2014/06/30 DOTA
Python中使用Inotify监控文件实例
2015/02/14 Python
Windows下使Python2.x版本的解释器与3.x共存的方法
2015/10/25 Python
Python实现登陆文件验证方法
2018/10/06 Python
Pycharm pyuic5实现将ui文件转为py文件,让UI界面成功显示
2020/04/08 Python
python os模块在系统管理中的应用
2020/06/22 Python
Python txt文件如何转换成字典
2020/11/03 Python
微博营销计划书
2014/01/10 职场文书
教师演讲稿大全
2014/05/16 职场文书
高中美术教师事迹材料
2014/08/22 职场文书
乡镇平安建设汇报材料
2014/08/25 职场文书
使用这 6个Vue加载动画库来减少我们网站的跳出率
2021/05/18 Vue.js
python之np.argmax()及对axis=0或者1的理解
2021/06/02 Python
win10搭建配置ftp服务器的方法
2022/08/05 Servers