vue中使用sessionStorage记住密码

最新推荐文章于 2024-08-06 08:00:00 发布

xiongdaandxiaomi

最新推荐文章于 2024-08-06 08:00:00 发布

阅读量3.2k

点赞数

分类专栏： Vue 文章标签： vue sessionStorage

本文链接：https://blog.csdn.net/xiongdaandxiaomi/article/details/81165769

版权

Vue 专栏收录该内容

64 篇文章 2 订阅

订阅专栏

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;
        }
      }