网站内容更新的通知( 内容更新时需要在入口加上小红点提示，实现起来不复杂)

　　网站内容更新的通知(

内容更新时需要在入口加上小红点提示，实现起来不复杂)

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

　　有登录状态

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

　　1. 更新数据

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

　　2. 获取数据

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

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

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

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

　　当需要推送内容给来宾状态的用户时，如何知道用户是否浏览了最新的内容？

　　1. 更新数据

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

　　2. 获取数据

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

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

　　总结

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

　　关于寻找教程网络