vue中使用本地存储记住密码功能

本地存储和localStorage比较

二者区别

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

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

localStorage和本地存储操作

localStorage和本地存储都具有相同的操作方法，例如setItem、getItem和removeItem等

记住密码功能

实现效果

页面

El-form div class=' rightLoginContent ' div class=' password main '输入类型=“文本”占位符='用户名v-model=' input ser ' id=' input ser ' @ change=' check username '自动对焦I class=' ico ico ico icon font icon-xingmingyonghumingnicheng '/I/div class='密码主页边距bottom 10 '输入类型='密码'占位符='密码id=' passwordsuser ' v-model=' passwordsuser ' @ change=' check username ' @ key up。输入=' loginFun ' I class=' ico icon font icon-log in IMA '/I div class=' prompt ' v-show=' msgiffshow ' { error msg } } I class=' ico ico icon font icon-cuowu '/I/div/div class=' rememberPwd '输入类型=' checkbox ' id=' rememberPwd ' v-model=' pwdChecked ' @ change='记住密码/div class=' logintn stop button log in ' v-show=' show log in '登录/div class=' logintn ' @ click=' loginFun ' v-show=' showlogines '登录/div /div /el-form方法

方法： { save pwd 3360 function(){ var checkbox status=this。pwdcheckedvar inputer=文档。getelementbyid(' inputer ').价值；var密码用户=文档。getelementbyid('密码用户').价值；if(复选框状态==true){ sessionstorage。setitem(inputer，passwordsuser)；} else {会话存储。删除项目(输入程序)；} }，check username : function(){ var inputer=document。getelementbyid(' inputer ').价值；var密码用户=文档。getelementbyid('密码用户').价值；/*console.log('inpUser '，InPuser)；*///从会话历史中取值var session impser=session storage。getitem(inputer)；if('！=sessionipUser sessionipUser！=null){ this。passwordsuser=session impser} if(InPuser==' ' | | InPuser==null){ this。显示登录名=truethis . showlogines=false } else if(password USer==' ' | | password USer==null){ this。显示登录名=truethis . showlogines=false } else { this . showlogines=false this . showlogines=true this . butnlogin=true } }总结

以上所述是小编给大家介绍的某视频剪辑软件中使用本地存储记住密码功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！