springboot+thymeleaf实现记录文章上次读的位置

背景：开发了一个面试题库的项目，在阅读文章的时候，每次都需要想想上次阅读到什么位置，在这个需求下，实现了一个文章上次阅读的位置记录。

1、前端代码如下，当文章太短，或者浏览时间太短，则不用记录

 <script>
        /**
         * 初始加载的时候，保存上次阅读的位置信息
         * 点击阅读的时候，将位置信息记录在内存中
         */
        var start = new Date();
        //onload时，取出并滚动到上次保存位置
        window.onload = function () {
            $(document).scrollTop([[${offsetTop}]]);
        };

        //监听滚动条事件并记录阅读位置
        $(document).on("mousewheel DOMMouseScroll", function (event) {
            var delta = (event.originalEvent.wheelDelta && (event.originalEvent.wheelDelta > 0 ? 1 : -1));
            //这部分是实现鼠标下滑，隐藏标题的实现，记录位置的逻辑可忽略
            if (delta > 0) { // 向上滚
                $(".site-header").show(1);//显示div
            } else {
                $(".site-header").hide(1);//隐藏div
            }

            end = new Date()
            var costTime = Math.round((end.getTime() - start.getTime()) / 1000); //秒
            var position = $(window).scrollTop();
            var distance = "[[${article.id}]]" + "#" + position;
            if (position > 1000 && costTime > 8) { //每8秒更新一次
                saveReadPosition(distance);
                start = new Date();
            }
        })

        function saveReadPosition(scrollTop) {
            $.ajax({
                url: "/article/offset/save",
                data: {scrollTop: scrollTop},
                type: "GET",
                success: function (data) {}
            });
        }

    </script>

2、后端代码接口/article/offset/save部分

看个人需求：当鼠标回滚的时候，不变更位置信息，静态缓存isUpdateKeyCache对象存储key，只要存在，都是最新文章的位置，否则从redis获取位置，增加定时任务存储到redis中。

public static final Set<String> isUpdateKeyCache = new HashSet<>();

    @Resource
    private RedisUtil redis;

@RequestMapping("/offset/save")
    @MethodDesc(value = "保存文章读取的位置,一往无前")
    public void saveReadArticlePosition(String scrollTop) {
        if (StringUtils.hasText(scrollTop)) {
            Map<String, Object> cacheMap = ArticleController.cacheMap;
            String[] scroll = scrollTop.split("#");
            String key = getKey("article:offsetTop", scroll[0]);
            double readIndex = Double.valueOf(scroll[1]);
            if (cacheMap.containsKey(key)) {
                Double aDouble = (Double) cacheMap.get(key);
                if (aDouble < readIndex) setCache(scroll[0], key, readIndex);
            } else if (redis.hasKey(key)) {
                Double aDouble = (Double) redis.get(key);
                if (aDouble < readIndex) setCache(scroll[0], key, readIndex);
            } else {
                setCache(scroll[0], key, readIndex);
            }
        }
    }

    private void setCache(String id, String key, Object value) {
        ArticleController.cacheMap.put(key, value);
        isUpdateKeyCache.add(id);
    }

    private String getKey(String... k) {
        StringBuilder sb = new StringBuilder();
        for (String key : k) sb.append(key).append(":");
        sb.deleteCharAt(sb.length() - 1);
        return sb.toString();
    }

其他的微小逻辑，根据自己来变更