Cookie存储用户名刷新丢失字符问题求助

嘿，我一眼就看出问题出在哪啦！你遇到的这个“刷新后用户名少一个字符”的问题，根源在于**keydown事件的触发时机不对**！

你想啊，当你按下键盘按键的时候，keydown事件会在字符真正输入到输入框之前就跑起来了。举个实际的例子：假设输入框里现在是"Lisa"，你按下字母"a"，这时候keydown触发，去取输入框的val()，得到的还是"Lisa"，而不是你想要的"Lisa a"——这就导致每次存到Cookie里的内容，都少了刚敲的最后一个字符，刷新页面后自然就显示不完整啦。

简单的修正方案 #

你只需要把监听的事件从keydown换成input或者keyup就搞定了：

• keyup是在你松开按键后触发，这时候字符已经乖乖进到输入框里了
• input更贴心，不管你是敲键盘、粘贴内容还是用输入法输入，只要输入框内容变了，它就会触发，覆盖的场景更多

给你改好的代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.3/js.cookie.js"></script>
<p>My name is <span class="input-border"></span><input type="text" class="form-control yourfirstname yourfirstname-input" name="yourfirstname" placeholder="yourfirstname" id="yourfirstname" required=""></p>
<script>
$(document).ready(function(){
    var name = Cookies.get('_yourname');
    if (name) {
        $('#yourfirstname').val(name);
    }
    // 换成input事件，适配更多输入场景
    $('#yourfirstname').on('input', function(){
        var inputName = $('#yourfirstname').val();
        Cookies.set('_yourname', inputName);
    })
});
</script>

额外小建议 #

• 可以给Cookie加个过期时间，比如Cookies.set('_yourname', inputName, { expires: 7 })，这样用户名能保留7天，不用每次都重新输入
• 要是用change事件的话，它只会在输入框失去焦点时才触发，体验不如input流畅，所以更推荐用input～

内容的提问来源于stack exchange，提问作者Brad