当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue中使用sessionStorage记住密码功能

vue中使用sessionStorage记住密码功能

2018年08月06日  | 移动技术网IT编程  | 我要评论

双重现场,b450拆机,于晓阳

sessionstorage和localstorage比较

二者区别

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

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

localstorage和sessionstorage操作

localstorage和sessionstorage都具有相同的操作方法，例如setitem、getitem和removeitem等

记住密码功能

实现效果

 页面

<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记住密码功能，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网