localStorage记住账号密码

1.需求

        记住账号密码，下次登录时自动填写

2.分析

        使用本地缓存记录数据，可以通过cookie或者localStorage来存储（现在基本用loaclStorage了）。
        潜在需求：localStorage只能存储字符串，需要对象字符串频繁转换。需要保存时间设置，到期清除。

3.解决方案

        编写存储与读取的公共方法：
        set方法解析，传三个参数（也可只传前两个），分别是存储的键key（mapName）与内容（map），以及保存时长（during）。这里map只接受集合，也推荐以集合存储数据。
        1.判断有三个参数时设定保存时间（during），否则不会自动删除。
        2.保存写入时间（writeTime）。
        3.对象转为JOSN字符串并存储。

图1.存数据

        get方法传入key返回内容：
        1.根据key（mapName）读取数据的JSON字符串
        2.字符串转换成对象
        3.如果没有during属性说明没设置过期时间，直接返回map
        4.比较读取时间和存入时间，间隔超过during的值即为过期，返回空集合
        5.未过期则返回map

图2.取数据

        通过上面两种方法，登录验证通过时调用set方法即可存储账号密码在本地缓存中，下次进入登录页使用set方法查询数据并渲染到页面即可。during是毫秒级数字型。writeTime与readTime是时间戳。

转载到其他平台需含本文的简书链接，vue技术我只在简书发布