sessionStorate和localStorage二者都是用来缓存客户端（浏览器端）数据。

相同点：
1：存储浏览器端数据
2：只能存储字符串数据

不同点：
1：sessionStorage 用来存储一个会话的页面数据，生命周期短；当该会话结束，sessionStorage消亡。
2：localStorage 存储数据永久保存，不会自动消亡。

最近开发功能恰好有这么几种场景：
一：验证码默认隐藏，针对不同用户密码连续三次输入错误，弹出验证码。
此场景就可以利用sessionStorage创建计数器，处理不同用户的登录次数，当登录成功后，清除该用户的登录计数器缓存。若登录失败，则针对该用户的计数器加1。若是超过我们设置的次数，则弹出验证码。前端额外设置一个参数传到后端，用来标识是否执行验证码验证处理。

1：设定每次刷新页面的时候清空缓存：

    //验证码缓存清空
    sessionStorage.clear();
    $("#hideCode").css("display","none");

2：实时监听用户输入框的值，若是发生变化，则获取该用户缓存计数器，进行验证码隐藏或者展示的处理。input框的oninput事件（值发生变化就会触发该事件。）

       let username=event.target.value;
        let loginNum=sessionStorage.getItem(username);
        if (loginNum==null || loginNum<=2) {
            $("#hideCode").css("display","none");
        }else if(loginNum>2){
            $("#hideCode").css("display","block");
        }

3: 登录后，若登录成功则把该用户的计数器缓存情况，反之则累加1。

//移除验证码计数器缓存
            sessionStorage.removeItem(username);

注意！浏览器有自动填充功能，js无法监听浏览器自动填充的账号密码值。这一点就很恶心！目前在网上关于这方面的内容不多，有知道的可以分享一波啊。

二：登录用户点击记住我，把用户信息进行长久性缓存，针对此类场景，就可以用到localStorage。

1：用户登录点击记住我时，当登录成功，把账号密码存入localStorage里面，因为密码比较敏感，对密码进行加密。缓存账号密码键值对数组。

  let objectItem={"username":username,"pwd":pwd};
    if (member){
        localStorage.clear();
        localStorage.setItem("keyinfo",JSON.stringify(objectItem));
    }

2：退出再次登录，页面加载，从local缓存里获取用户信息，获取之后，对密码解密填充到密码框

window.onload=function(){
    //验证码缓存清空
    sessionStorage.clear();
    $("#hideCode").css("display","none");
    // 用户信息缓存
    let userkey=localStorage.getItem("asdasd");
    if(userkey!=null){
        let user=JSON.parse(userkey);
        let username=user.username;
        let pwd=user.pwd;
        $("#username").val(username);
        $("#pwd").val(base64decode(pwd));
    }
};

注意：程序段的记住密码功能，类似浏览器的自动填充账号密码，当二者都存在时，程序的记住密码会被浏览器的自动填充账号密码覆盖掉。
目前需求只考虑一个账号，而且网站禁用浏览器的记住我功能，所以不再考虑冲突。

好了本次分享到此结束了。有感兴趣的大家可以留言互相交流。