Valine addon 16/03/2020
最后编辑于:

为 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本身有本地储存信息,如果一次清除完会导致刷新后无法读取用户信息)