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