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记住密码功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
无争山庄资源网 Copyright www.whwtcm.com
暂无“vue中使用sessionStorage记住密码功能”评论...
更新日志
2024年10月02日
2024年10月02日
- 孙悦.1996-伙伴【正大国际】【WAV+CUE】
- 纪钧瀚《钢琴阅读时光 雨中书店聆听轻音乐》[FLAC/分轨][399.62MB]
- 证声音乐图书馆《走向自然 疗心爵士乐》[320K/MP3][87.4MB]
- 证声音乐图书馆《走向自然 疗心爵士乐》[FLAC/分轨][184.94MB]
- 陈慧娴.2018-Priscilla-Ism演唱会3CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 郑秀文.1999-我应该得到(国)【华纳】【WAV+CUE】
- 陈家慧.2011-钢琴酒吧2CD【龙吟唱片】【WAV+CUE】
- 证声音乐图书馆《雨季 蓝调吉他 Rainy Blues》[320K/MP3][45.01MB]
- 证声音乐图书馆《雨季 蓝调吉他 Rainy Blues》[FLAC/分轨][109.13MB]
- 赞多《序章》[320K/MP3][45.54MB]
- 许巍.2004-每一刻都是崭新的【步升大风】【WAV+CUE】
- 群星.2024-四方馆影视原声带【韶愔音乐】【FLAC分轨】
- 陈雷.1997-安锁咧【金圆唱片】【WAV+CUE】
- 关淑怡.2013-MY.FAVORITE.SK.3CD【环球】【WAV+CUE】
- Sweety.2006-花言乔语【丰华】【WAV+CUE】