vue中使用sessionStorage记住密码功能


Posted in Javascript onJuly 24, 2018

sessionStorage和localStorage比较

二者区别

sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。

localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

localStorage和sessionStorage操作

localStorage和sessionStorage都具有相同的操作方法,例如setItem、getItem和removeItem等

记住密码功能

实现效果

vue中使用sessionStorage记住密码功能

 页面

<el-form>
 <div class="rightLoginContent">
    <div class="passWordMain">
      <input type="text" placeholder="用户名" v-model="inpUser" id="inpUser" @change="checkusername" autofocus>
      <i class="ico iconfont icon-xingmingyonghumingnicheng"></i>
    </div>
    <div class="passWordMain marginbottom10">
      <input type="password" placeholder="密码" id="passwordUser" v-model="passwordUser" @change="checkusername" @keyup.enter="loginFun"> 
      <i class="ico iconfont icon-loginmima"></i>
      <div class="prompt" v-show="msgifshow">{{errormsg}}
       <i class="ico iconfont icon-cuowu"></i>
      </div>
    </div>
    <div class="rememberPwd">
     <input type="checkbox" id="rememberPwd" v-model="pwdChecked" @change="savePwd">
      记住密码
    </div>
    <div class="loginBtn stopbuttonLogin" v-show="showlogins">登录</div>
    <div class="loginBtn" @click="loginFun" v-show="showlogines">登录</div>
  </div>
 </el-form>

方法

methods:{
   savePwd:function(){
     var checkboxStatus=this.pwdChecked;
     var inpUser=document.getElementById("inpUser").value;
     var passwordUser=document.getElementById("passwordUser").value;
     if(checkboxStatus==true){
       sessionStorage.setItem(inpUser,passwordUser);
     }
     else{
      sessionStorage.removeItem(inpUser);
     }
   },
   checkusername:function(){
    var inpUser=document.getElementById("inpUser").value;
    var passwordUser=document.getElementById("passwordUser").value;
    /*console.log("inpUser",inpUser);*/
    //从sessionstory中取值
    var sessionipUser=sessionStorage.getItem(inpUser);
    if(""!=sessionipUser && sessionipUser !=null){
     this.passwordUser=sessionipUser;
    }
    if(inpUser=='' || inpUser==null){
     this.showlogins=true;
     this.showlogines=false;
    }else if(passwordUser==''|| passwordUser==null){
     this.showlogins=true;
     this.showlogines=false;
    }
    else{
     this.showlogins=false;
     this.showlogines=true;
      this.buttnLogin=true;
    }
   }

总结

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

Javascript 相关文章推荐
农历与西历对照
Sep 06 Javascript
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
Mar 10 Javascript
JS实现self的resend
Jul 22 Javascript
表格单元格交错着色实现思路及代码
Apr 01 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
Aug 17 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
Feb 14 Javascript
JS实现移动端实时监听输入框变化的实例代码
Apr 12 Javascript
AngularJS发送异步Get/Post请求方法
Aug 13 Javascript
vue webpack开发访问后台接口全局配置的方法
Sep 18 Javascript
layui的面包屑或者表单不显示的解决方法
Sep 05 Javascript
使用kbone解决Vue项目同时支持小程序问题
Nov 08 Javascript
jQuery实现评论模块
Aug 19 jQuery
Vue-router 中hash模式和history模式的区别
Jul 24 #Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
Jul 24 #Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
Jul 24 #Javascript
JS实现全屏预览F11功能的示例代码
Jul 23 #Javascript
AngularJS ui-router刷新子页面路由的方法
Jul 23 #Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
Jul 23 #Javascript
JS实现简单的星期格式转换功能示例
Jul 23 #Javascript
You might like
全国FM电台频率大全 - 7 吉林省
2020/03/11 无线电
linux命令之调试工具strace的深入分析
2013/06/03 PHP
Zend Framework教程之Zend_Config_Ini用法分析
2016/03/23 PHP
JavaScript 对象模型 执行模型
2009/12/06 Javascript
javascript getElementsByClassName函数
2010/04/01 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
2014/05/07 Javascript
jqueryUI里拖拽排序示例分析
2015/02/26 Javascript
JS获取图片lowsrc属性的方法
2015/04/01 Javascript
详解Javascript事件驱动编程
2016/01/03 Javascript
基于javascript html5实现3D翻书特效
2016/03/14 Javascript
js方法数据验证的简单实例
2016/09/17 Javascript
JS中数组重排序方法
2016/11/11 Javascript
bootstrap datepicker插件默认英文修改为中文
2017/07/28 Javascript
详谈js对url进行编码和解码(三种方式的区别)
2017/08/16 Javascript
详解vue-cli 构建Vue项目遇到的坑
2017/08/30 Javascript
解决node修改后需频繁手动重启的问题
2018/05/13 Javascript
浅谈JS中this在各个场景下的指向
2019/08/14 Javascript
JS事件流与事件处理程序实例分析
2019/08/16 Javascript
Vue中实现回车键切换焦点的方法
2020/02/19 Javascript
[01:23:35]Ti4主赛事胜者组 DK vs EG 1
2014/07/19 DOTA
[01:20:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第四场 8.26
2018/08/30 DOTA
python实现博客文章爬虫示例
2014/02/26 Python
python在windows下实现备份程序实例
2014/07/04 Python
python使用matplotlib模块绘制多条折线图、散点图
2020/04/26 Python
python实现最大优先队列
2019/08/29 Python
python Event事件、进程池与线程池、协程解析
2019/10/25 Python
python cv2在验证码识别中应用实例解析
2019/12/25 Python
python快速安装OpenCV的步骤记录
2021/02/22 Python
iframe在移动端的缩放的示例代码
2018/10/12 HTML / CSS
乡村卫生服务一体化管理实施方案
2014/03/30 职场文书
珍惜资源保护环境的建议书
2014/05/14 职场文书
体育运动会广播稿
2014/10/05 职场文书
南湾猴岛导游词
2015/02/09 职场文书
英语辞职信范文
2015/02/28 职场文书
win10双系统怎么删除一个系统?win10电脑有两个系统删除一个的操作方法
2022/07/15 数码科技
Elasticsearch6.2服务器升配后的bug(避坑指南)
2022/09/23 Servers