欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue中使用sessionStorage记住密码功能

程序员文章站 2022-04-29 14:11:28
sessionstorage和localstorage比较 二者区别 sessionstorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会...

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