网站内容更新提醒( 内容更新时需要在入口加上小红点提示，实现思路大同小异)

　　网站内容更新提醒(

内容更新时需要在入口加上小红点提示，实现思路大同小异)

　　覆盖

　　内容更新时，需要在入口处添加一个小红点。这种需求并不少见，实现起来也不复杂。实现场景很多，比如web、app、applet等，实现思路都是一样的。本文从有登录状态和无登录状态的两种场景来描述解决问题的完整思路。

　　已登录

　　更传统的做法是在用户登录时，在后台将用户的阅读时间输入到用户数据信息中。当内容更新时，将内容更新时间与用户的阅读时间进行比较。如果用户已经阅读了时间较早的内容有更新，在入口处会提示用户一个小红点，表示有更新的内容没有阅读。

　　图片

　　1. 更新数据

　　第一步是更新数据。除了常规的数据字段，还需要关注新的更新时间字段。这样，当用户获取数据时，方便后台比较数据更新时间和用户阅读时间。

　　2. 获取数据

　　第二步是获取数据。获取数据时，带上userId。后台收到请求后，会查询用户的上次阅读时间，判断用户是否浏览过最新的内容，进而获取用户的阅读未读状态。

　　如果用户最近阅读时间晚于数据最近更新时间，则用户处于未读状态，接口返回is_read:false。前端得到这个字段后，请求设置读取接口。后台收到设置读取的请求后，更新用户数据中的读取时间字段。

　　如果用户最近的阅读时间晚于数据的最近更新时间，则处于阅读状态，此时没有内容更新，不会有小红点提示用户。

　　图片

　　至此，一个简单的带有用户登录状态提示小红点功能的内容更新提示就完成了。

　　未登录

　　当需要在访客状态下向用户推送内容时，如何知道用户是否浏览了新发布的内容？

　　1. 更新数据

　　更新数据和登录状态一样，只是增加了一个更新时间字段。

　　2. 获取数据

　　获取数据的步骤有些不同。数据更新时间依然是从后台拉取，从浏览器本地缓存localStorage中获取用户最近的阅读时间。当用户第一次进入内容页面时，localStorage 中的 readTime 字段会更新以指示用户已阅读的时间。

　　再次进入内容页面时，将localStorage中的读取时间与数据更新时间进行比较，决定是否更新localStorage中的读取时间。这样可以在内容更新时提示小红点，内容未更新时不提示。但是由于没有登录状态，是否阅读最新内容不是由用户决定，而是由客户端浏览器决定，适合弱绑定场景。

　　图片

　　总结

　　本文分享内容更新时出现小红点提示的解决方法。希望这篇文章能帮助大家了解如何做消息通知——内容更新时小红点提示的实现过程。