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中的border-radius属性
Aug 18 HTML / CSS
CSS3 box-sizing属性详解
Nov 15 HTML / CSS
10分钟理解CSS3 Grid布局
Dec 20 HTML / CSS
HTML5-WebSocket实现聊天室示例
Dec 15 HTML / CSS
使用html2canvas实现浏览器截图的示例代码
Jan 26 HTML / CSS
浅谈three.js中的needsUpdate的应用
Nov 12 HTML / CSS
HTML中使用SVG与SVG预定义形状元素介绍
Jun 28 HTML / CSS
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
Apr 10 HTML / CSS
Application Cache未缓存文件无法访问无法加载问题
May 31 HTML / CSS
HTML5实现动画效果的方式汇总
Feb 29 HTML / CSS
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
May 14 HTML / CSS
CSS实现渐变色边框(Gradient borders)的5种方法
Mar 25 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
Flash空降上海 化身大魔王接受挑战
2020/03/02 星际争霸
BBS(php &amp; mysql)完整版(一)
2006/10/09 PHP
深入php var_dump()函数的详解
2013/06/05 PHP
php从memcache读取数据再批量写入mysql的方法
2014/12/29 PHP
浅谈PHP命令执行php文件需要注意的问题
2016/12/16 PHP
用JQuery 实现的自定义对话框
2007/03/24 Javascript
extjs中grid中嵌入动态combobox的应用
2011/01/01 Javascript
jQuery 滑动方法slideDown向下滑动元素
2014/01/16 Javascript
理解javascript中的回调函数(callback)
2014/09/02 Javascript
node.js中的http.response.setHeader方法使用说明
2014/12/14 Javascript
JS交换变量的方法
2015/01/21 Javascript
jquery实现textarea 高度自适应
2015/03/11 Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
2016/05/27 Javascript
Vue如何引入远程JS文件
2017/04/20 Javascript
基于Bootstrap表单验证功能
2017/11/17 Javascript
vue项目中v-model父子组件通信的实现详解
2017/12/10 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
2018/01/25 Javascript
微信小程序实现提交input信息到后台的方法示例
2019/01/19 Javascript
layui监听工具栏的实例(操作列表按钮)
2019/09/10 Javascript
JS扁平化输出数组的2种方法解析
2019/09/17 Javascript
[06:07]辉夜杯现场观众互动 “比谁远送显示器”
2015/12/26 DOTA
用Python操作字符串之rindex()方法的使用
2015/05/19 Python
python 调用c语言函数的方法
2017/09/29 Python
matplotlib.pyplot绘图显示控制方法
2019/01/15 Python
详解python配置虚拟环境
2019/04/08 Python
python的等深分箱实例
2019/11/22 Python
英国领先的在线高尔夫商店:Gamola Golf
2019/11/16 全球购物
学前教育求职自荐信范文
2013/12/25 职场文书
学期研究性学习个人的自我评价
2014/01/09 职场文书
工作作风承诺书
2014/08/30 职场文书
“四风”问题整改措施和努力方向
2014/09/20 职场文书
农村党支部书记司法四风问题对照检查材料
2014/09/26 职场文书
个人批评与自我批评总结
2014/10/17 职场文书
2015大学生入党个人自传
2015/06/26 职场文书
2016年村干部公开承诺书(公开承诺事项)
2016/03/25 职场文书
Win10防火墙白名单怎么设置?Win10添加防火墙白名单方法
2022/04/06 数码科技