vue中使用sessionStorage记住密码功能

 更新时间:2018年07月24日 10:39:37   作者:xiongdaandxiaomi  
sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。这篇文章主要介绍了vue中使用sessionStorage记住密码功能,需要的朋友可以参考下

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记住密码功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • vue如何自定义组件v-model

    vue如何自定义组件v-model

    这篇文章主要介绍了vue如何自定义组件v-model问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • Vue v-model实现案例介绍

    Vue v-model实现案例介绍

    v-model就是vue的双向绑定的指令,能将页面上控件输入的值同步更新到相关绑定的data属性,也会在更新data绑定属性时候,更新页面上输入控件的值
    2022-09-09
  • vue的h5日历组件实现详解

    vue的h5日历组件实现详解

    这篇文章主要为大家详细介绍了vue的h5日历组件使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-09-09
  • 在vue.js渲染完界面之后如何再调用函数

    在vue.js渲染完界面之后如何再调用函数

    这篇文章主要介绍了在vue.js渲染完界面之后如何再调用函数的实现方法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • vue项目实现背景颜色以及下划线从左到右渐变动画效果

    vue项目实现背景颜色以及下划线从左到右渐变动画效果

    这篇文章主要介绍了vue项目实现背景颜色以及下划线从左到右渐变动画效果,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • 在vue2.x里面简单使用socketio问题

    在vue2.x里面简单使用socketio问题

    这篇文章主要介绍了在vue2.x里面简单使用socketio问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue 移动端记录页面浏览位置的方法

    vue 移动端记录页面浏览位置的方法

    这篇文章主要介绍了vue 移动端记录页面浏览位置的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • ElementUI Tag组件实现多标签生成的方法示例

    ElementUI Tag组件实现多标签生成的方法示例

    这篇文章主要介绍了ElementUI Tag组件实现多标签生成的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • 详解如何在Vue3使用<script lang=“ts“ setup>语法糖

    详解如何在Vue3使用<script lang=“ts“ setup>语法糖

    本文主要介绍了在Vue3使用<script lang=“ts“ setup>语法糖,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • 解决vue-router在同一个路由下切换,取不到变化的路由参数问题

    解决vue-router在同一个路由下切换,取不到变化的路由参数问题

    今天小编就为大家分享一篇解决vue-router在同一个路由下切换,取不到变化的路由参数问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09

最新评论