Valine 留言记录与最后编辑时间

文章摘要moonshot-v1-8k

Standby API Responsing..

为 Valine 添加记录留言与最后编辑时间

解决了 url 出错的问题，这次决定为 valine 添加点额外功能。之前有在其他网站看到留言评论的时候，如果当时不提交评论而去浏览另一篇文章，输入过的留言仍然存在（感觉贼方便，妈妈再也不用担心写了一大堆点错了就没了233）

当然，那时候没想弄那个的想法。这次将就 valine 稍微修改一下下，另外需要注意的是要操作 valine 动态添加的元素则需要额外的代码。

记录留言

思路很简单，利用 localStorage 或者 sessionStorage 本地储存来做记录，以下是流程：

1. 设置 setTimeout 定时器（用于监听并操作动态添加的元素），判断当前评论框的值是否等于本地储存记录的值，是则清除定时器（已设置），否则获取本地储存的值并设置到评论框（未设置 textarea 的 val()）；
2. 为评论框添加 input propertychange change 监听事件，获取当前评论框的值（注意是 val 而不是 text ，val会动态改变值），将获取到的值记录到本地储存，获取本地储存的值传入评论框 val()

var utls = window.sessionStorage;

    var isLoadText = setTimeout(function(){
        $('.v .veditor').val() != utls.getItem('textRecord') ? $('.v .veditor').val(utls.getItem('textRecord')) : clearTimeout(isLoadText);
    }, 500);

    $('.content-all').on('input propertychange','.v .veditor',function(){
        let utr = $(this).val();
        utls.setItem('textRecord',utr);
    });

记录最后编辑时间

1. 定时器内，从本地储存获取 lastRecord （最后编辑时间）写入到动态添加的目标元素，从本地储存读取数据判断是否显示最后编辑时间。
2. 监听 input propertychange change 事件时，设定时间变量并获取当前时间写入本地储存，将本地储存的时间写入动态添加的目标元素，从本地储存读取数据判断是否显示最后编辑时间。

                        utls.textRecord == '' || utls.textRecord == null ? $('.v .timeRecord').hide() : $('.v .timeRecord').show().find('b').text(utls.getItem('timeRecord'));

                        

var d = new Date(),dh = d.getHours(),dm = d.getMinutes(),ds = d.getSeconds();
    utls.setItem('timeRecord',dh+':'+dm+':'+ds);
    utls.textRecord == '' ? $('.v .timeRecord').hide().find('b').text('') : $('.v .timeRecord').show().find('b').text(utls.getItem('timeRecord'))

清空本地储存

点击按钮提交后，清除相应本地储存（.on()下的 click 事件无效，改用 mouseup 替代）

$('.content-all').on('mouseup','.v .vbtn',function(){
        $('.v .timeRecord').hide();
        localStorage.removeItem("textRecord","timeRecord"); //sessionStorage.clear();

已知存在的bug

• 如果只输入 emoji 表情，无法记录到本地储存 已修复（加个点击事件，每次点击记录值）
• 提交评论后刷新页面，本地储存仍存在.. 已修复（click 无效，改用 mouseup）
• 提交评论后刷新页面，用户信息（昵称、邮件、站点）消失.. 已修复（使用 localStorage.removeItem("key") 来清除本地储存）

注意事项

1. 以上所有操作均依赖于 jQuery ，需要引入 jQuery 后再执行。
2. 使用 setTimeout 而不是 setInterval （避免重复添加）
3. 初始化判断 textarea 本地储存值，需要判断是否为 null （因为 textarea 没有储存初始值， change 时只需判断”）
4. 通过判断本地储存 textarea 的值来控制 input propertychange change 后 timeRecord 的显示/隐藏；（如通过判断 timeRecord 值来控制，初始化无法读取到本地储存的 timeRecord 造成输入字符后删除（使用 setInterval ））
5. 使用 localStorage.removeItem("key") 而不是 sessionStorage.clear() 来清除本地储存（Valine本身有本地储存信息，如果一次清除完会导致刷新后无法读取用户信息）