Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Valine 留言记录与最后编辑时间

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

作者头像
2Broear
发布于 2024-03-12 02:00:02
发布于 2024-03-12 02:00:02
21300
代码可运行
举报
文章被收录于专栏:2B博客2B博客
运行总次数:0
代码可运行

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

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

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

记录留言

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

  1. 设置 setTimeout 定时器(用于监听并操作动态添加的元素),判断当前评论框的值是否等于本地储存记录的值,是则清除定时器(已设置),否则获取本地储存的值并设置到评论框(未设置 textarea 的 val());
  2. 为评论框添加 input propertychange change 监听事件,获取当前评论框的值(注意是 val 而不是 text ,val会动态改变值),将获取到的值记录到本地储存,获取本地储存的值传入评论框 val()
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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 事件时,设定时间变量并获取当前时间写入本地储存,将本地储存的时间写入动态添加的目标元素,从本地储存读取数据判断是否显示最后编辑时间。
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
                        utls.textRecord == '' || utls.textRecord == null ? $('.v .timeRecord').hide() : $('.v .timeRecord').show().find('b').text(utls.getItem('timeRecord'));
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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 替代)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$('.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本身有本地储存信息,如果一次清除完会导致刷新后无法读取用户信息)
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022/06/16 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
总结一下常用的前端缓存
前端缓存,是浏览器为了提升网站的加载性能,缩短用户等待时间而采取的措施,浏览器总是想尽量少地向服务器发送请求,能够从自己保存的副本中得到的,就不去麻烦服务器了,毕竟自己动手丰衣足食嘛,所以更准确的叫法应该为浏览器缓存,下文中如果出现缓存等字眼,指的就是前端缓存或浏览器缓存。
用户2323866
2021/06/24
1K0
注意啦!Web Storage的用法都在这里了
localStorage与sessionStorage是Web Storage提供的两种存储在客户端的方法。 localStorage:没有时间限制的存储方式。存储的时间可以是一天,二天,几周或几十年!关闭浏览器数据不会随着消失,当再次打开浏览器时,数据依然可以访问!也就是说除非你主动删除数据,否则数据是永远不会过期的。 sessionStorage:保存在session对象当中。用来保存的时间为用户与浏览器的会话时间。即从浏览页面到关闭浏览器为一个会话时间。关闭浏览器,所有的 session数据也会消失!
用户1272076
2019/03/26
8350
前端面试如何回答,这些题目或许可以给你一些提示
(3)让函数的 this 指向这个对象,执行构造函数的代码(为这个新对象添加属性)
loveX001
2022/11/15
6710
Valine 实现评论“撤回”重新编辑
说到消息“撤回”,应该能想到 qq 或者微信提供的消息撤回功能,应该算是互联网上的一剂后悔药,这样做不仅能减少评论错误,还能极大程度提升用户使用体验,这两全其美的事情何乐而不为,可我们修改的对象 Valine 一如既往的没有提供这些人性化的功能,所以我们还得和以前一样看看文档写写 bug 才能把功能捣鼓出来..(想法来自 @Zsedczy 的评论重新编辑和撤销删除)
2Broear
2024/03/12
2060
Valine 实现评论“撤回”重新编辑
一种简单无副作用的同源跨页面数据同步方案
提起这个方案,还要从某个风和日丽的早晨说起。那日小编正忙着手上的各种需求,突然后端的亲火急火燎的找到小编,说是有一个重要的用户,在使用 Word 在线编辑文档功能时,发现保存的文件被篡改了。一听到这,我心想这下摊上事儿了,妥妥的线上故障,但还是故作镇定的开始排查是什么问题。
政采云前端团队
2019/12/20
1.4K0
一种简单无副作用的同源跨页面数据同步方案
浏览器本地存储方案
浏览器本地存储方案可以分为三个方面,分别为Cookie、Web Storage、IndexedDB。
WindRunnerMax
2021/01/18
7660
利用 Canvas 实现 Valine 评论画板涂鸦
前几天在 Joe(https://ae.js.cn/)网站上留言的时候发现了一个叫“画图模式”的东西,点进去后自动切换文本框到画板了(类似QQ涂鸦,你画我猜那种画板),然后可以在画板上画画,还可以选择画笔粗细、颜色等等,画错了还能撤销各种功能,欸感觉挺有意思的,当时也猜到了应该是用 canvas 做的,不过自己也不太了解这块,但就是感觉挺有意思的,加上我又喜欢魔改 valine 评论,所以立下计划决定给评论系统加上这么一个好玩的功能。
2Broear
2024/03/12
2450
利用 Canvas 实现 Valine 评论画板涂鸦
HTML 5 Web 存储
localStorage – 没有时间限制的数据存储 sessionStorage – 针对一个 session 的数据存储
全栈程序员站长
2022/07/15
5210
Cookie、LocalStorage 与 SessionStorage的区别
Cookie 是小甜饼的意思。顾名思义,cookie 确实非常小,它的大小限制为4KB左右。它的主要用途有保存登录信息,比如你登录某个网站市场可以看到“记住密码”,这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。
跟着阿笨一起玩NET
2020/06/30
1.5K0
Hexo NexT 评论系统 Valine 的使用
注明:以下方案是在 Valine 1.4.9 版本下完成,对于其他版本应该会根据实际情况修改参数,使用 F12 查看参数修改即可使用!(说明于 2020 - 04 - 25)
零式的天空
2022/03/28
1.7K0
LocalStorage 设置过期时间?
以上问题都是日常开发中遇到的,所以有此记录,如果你有不同的解决方案,欢迎留言告诉哦,不同的思路带来不同的碰撞,哈哈。
执行上下文
2022/07/26
3.4K0
LocalStorage 设置过期时间?
前端面试中小型公司都考些什么
XSS 攻击指的是跨站脚本攻击,是一种代码注入攻击。攻击者通过在网站注入恶意脚本,使之在用户的浏览器上运行,从而盗取用户的信息如 cookie 等。
loveX001
2022/10/28
8330
前端成神之路-WebAPIs07
移动端浏览器兼容性较好,我们不需要考虑以前 JS 的兼容性问题,可以放心的使用原生 JS 书写效果,但是移动端也有自己独特的地方。比如触屏事件 touch(也称触摸事件),Android 和 IOS 都有。touch 对象代表一个触摸点。触摸点可能是一根手指,也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作。
海仔
2021/01/05
3.7K0
前端成神之路-WebAPIs07
Web端IM聊天消息该不该用浏览器本地存储?一文即懂!
鉴于目前浏览器技术的进步(主要是HTML5的普及),在Web网页端IM聊天应用的技术选型阶段,很多开发者都会纠结到底该不该像原生移动端IM那样将聊天记录缓存在浏览器的本地,还是像传统Web端即时通讯那样继续存储在服务端?本文将为你简洁明了地讲清楚浏览器本地存储技术(Web Storage),然后你就知道到底该怎么选择了。
JackJiang
2024/11/28
1250
Web端IM聊天消息该不该用浏览器本地存储?一文即懂!
前端day14-JS(WebApi)学习笔记(BOM、定时器)
window.location.assign('http://www.baidu.com');
帅的一麻皮
2020/05/03
1.8K0
前端day14-JS(WebApi)学习笔记(BOM、定时器)
Javascript - BOM 对象
用以下内容可以自己手写一个 TodoList 小程序,再添加几行代码就可以用手机浏览器保存在桌面变成一个 web-app 使用!我自己写的托管在 GitHub,感兴趣的可以看看源码给个 star!~
Carlos Ouyang
2019/08/19
9560
H5本地存储详细使用教程--上
H5本地存储有两个API,一个是Web Storage,还有一个是Web SQL。不管是哪一个,都是基于JavaScript语言来使用,接下来我就教你怎么使用H5本地存储,本文篇幅较大,JS代码较多,请耐心阅读。 一、Web Storage教程 1、概述: 对于Web Storage来说,实际上是Cookies存储的进化版。如果了解Cookie的人几乎一看Web Storage就会用,如果你从来没用过没了解过Cookie,没关系,看了这篇文章照样轻松玩转Web Storage。首先,学习Web Stora
李海彬
2018/03/27
2.8K0
一个比 Cookie 更好的本地存储方式 – HTML5 Web 存储
这些功能不需要长期保存,也不需要入数据库,所以有人可能会考虑使用 Cookie 去进行存储,但是 Cookie 中每条的存储空间为 4k,存储太多的数据时可能会出现存储空间不足的问题
沈唁
2018/12/25
2.1K1
web本地存储localStorage和sessionStorage
记录本地存储的相关信息(cookie,sessionStorage,LocalStorage等)的存储信息
用户1055830
2019/05/25
3.3K0
DOM存储——客户端存储
Dom存储(Storage)API 是通过 sessionStorage 对象和 localStorage 对象来实现的。通过这些对象,WEB应用程序能够把信息存储到客户端,并再以后需要的时候进行获取。
Html5知典
2019/11/26
2.9K0
相关推荐
总结一下常用的前端缓存
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验