记一次小功能的实现过程与体会

不知道大家有没有注意到很多网站登录页面中的 记住账号或记住密码这个小功能。感觉它有点多余的对吧，我也是这么觉得的，印象中自己就没使用过它。哈哈哈。不知道为啥那么多网站的登录页面都还保留着它？？

我作为一个初学者，先不去管它到底有没有什么用，想着就这么一个小功能实现它不难吧。结果......

动手之前先找找有相关资料，看有没有什么现成的我好c+v什么的，找一圈下来啥也没找到，
开始做的时候，我连数据应该记录在哪都不知道，习惯性的认为记录在后端，尝试的时候遇到一堆的问题。
我通过会话去记录，但很快有发现这个会话有生命周期，好像还是统一维护的。虽然可以将用户本地的session过期时间设置得足够长，但最后还是要过期。记住账号这个功能，从字面理解上应该是永久记住吧，除非用户清除浏览器数据。然后就是可以伪造。很不安全。很多人说数据加密、使用token什么的，我觉得我只是在web上实现这个功能而已，无状态token令牌没必要吧。我技术又很菜，这个安全问题解决不了就不解决吧。只记录账号应该问题不大。

改储存到本地：
什么时候储存？怎么存？又什么时候移除？
什么时候存和什么时候移除，考虑到用户登录的时候可能有多种非正常情况，例如账号不存在、密码错误、账号被锁定以及验证码错误和请求频繁等等... 这些情况下都不应该记住账号。储存这个操作只能等后端返回状态成功再去操作。

也不怕大家笑，通过搜索引擎找到的JavaScript操作localStorage语法。以前见过，但就是到了用的时候打不来，也不记得😂😂😂

处理流程是：
1、前端传递记住账号的状态，后端判断。在返回的data中维护一个属性，前端根据这个属性是否操作储存或移除。
2、本地有记录时登录页面要从本地获取记录并渲染到账号input中，并把记住账号的复选框标为选中状态。
3、在有记录的情况下要移除只需要取消复选框既可。
我在实现的时候前端做了统一响应拦截，没有做判断的造成非登录页面的from请求返回时移除了账号数据。
然后我用JavaScript中对象的方法hasOwnProperty检查一下对象是否具有指定名称的属性。后端登录接口始终返回一个属性，值是用户的登录账号或是空。

整体上还算简单，前后用了1个小时完成了这个功能，正当我体验这个功能时，发现它确实没什么卵用。唯一有点作用就是前端习惯性占位布局吧。再看我做的登录界面emmmmm.....

调整前端布局，我按照常规的布局搓了将近半个多小时的css，看着自己改完的界面我开始怀疑我TMD在干啥了，真的是又丑又没什么用，真想给自己一个大嘴巴子。

但折腾了半天又有点不甘心。就在哪里反复的问自己我为啥要做它？它有什么用。你还别说就这么反复的问，还真让我找到了一丝它存在的理由。首先它确实是习惯性视觉占位，那个位置不是记住账号就是什么登录既代表同意什么什么的。其次再说功能，随着互联网的发展普及，个人拥有大量不同网站或者是同一个网站的多个账号，总会出现要么账号记不住了要么密码记不住的情况，有时候可能都想不起来在哪里注册过账号。
浏览器特性就有密码自动填充和密码管理，以至于不少干前端的认为自动填充密码影响了界面美观而用各种手段去禁止浏览器这一行为。浏览器有这个功能那确实是因为大家经常记不住账号或者密码。我去翻了下浏览器的密码管理功能才发现这么小一个功能他们都玩出花了，相比网站上这个功能就显得有些鸡肋。大家忽视它也很正常。瞎琢磨半天总算对这个小功能有了新的认识，然后我又又又开始动手了......

1、将之前只能记住一个账号改成记录多个账号。
2、本地记录账号数量小于等于1的时候前端渲染input框，数量等于1的时候填充账号到input框。
3、账号数量大于1时将input框改为下拉选框，并调整下来选择框的样式布局。
4、多个记录账号的情况下标记 最近登录。用户在登录界面时默然将最近登录的账号设置为选中。

等搞完这些功能点天已经亮了 ...

效果：

第一版效果