实现这个功能,其实很简单,就是做一段定时存储处理嘛,然后在用户打开首页的时候,在首页某个地方展示就行了,直接copy首页的css样式就像,取决你放哪里。

那么理论存在,思路也有了,开始实现。

功能实现

那既然是观看历史,肯定是在首页直接展示或者用户登录页,我这边取首页展示了,具体效果可以查看我的WarHut影视

首先肯定是分析下自己首页的整体样式,看看该怎么样无缝插入最好,这边我直接取了 热门推荐 这个样式,好用且不复杂,也不影响原有布局。

                <!-- 热门推荐 -->
                <my-list class="flex flex-col p-4 pt-7 md:mb-[1vw] md:mt-[2.1875vw] md:flex md:p-0 mylist">
                    <import file="../libs/web/notice/index.html"/>
                    <!-- 上方通用广告dom -->
                    <div class="box-width" style="margin-bottom: 10px;">
                        <import file="../libs/web/ads/index.html" data="topBanner" />
                    </div>
                    <section-header class="flex items-center gap-[0.625vw]" style="margin-top: 20px;">
                        <header-title class="text-lg font-bold md:text-[1.25vw]" data-svelte-h="svelte-1ng29d9">热门推荐</header-title>
                    </section-header>
                    <my-list-animes class="relative mt-4 grid grid-cols-3 gap-3 md:mt-[1vw] md:grid-cols-5 md:gap-[1.25vw]" id="hotRecommendations">
                        <getVideosList name="$List" page="1" limit="$.G.Nums.VodHotNum" hots="1" random="1">
                            <foreach name="$items" index="$index" data=".List">
                                <import file="/public/list.html" data="$" />
                            </foreach>
                        </getVideosList>
                    </my-list-animes>
                    <div class="section-box boxindexbutton" style="margin-top: 10px;">
                        <import file="../libs/web/ads/index.html" data="bottomBanner" />
                    </div>
                    <!-- 历史记录部分 -->
                    <section-header class="flex items-center gap-[0.625vw]" style="margin-top: 20px;">
                        <header-title class="text-lg font-bold md:text-[1.25vw]">历史记录</header-title>
                    </section-header>
                    <div id="historyList" class="relative mt-4 grid grid-cols-3 gap-3 md:mt-[1vw] md:grid-cols-5 md:gap-[1.25vw]"></div>
                </my-list>

很清楚的看到,就是在热门历史下面加了一段差不多的css,不影响原基础的样式下,这样就实现了首页展示。

什么?你说忘记了js部分?噢,对噢,确实,还需要js进行存储数据并且展出数据

那么接下来就是js部分了,其实更简单了~找到你的通用js地方,最好是播放页面引入的,这样就不会在其它地方加载,浪费事件。

那么js部分就非常简单了,就是一些元素dom操作以及本地会话存储,你看不懂?丢chatgpt啊!推荐国产的deepseek

<script>
    function populateHistory() {
        const hlHistory = document.querySelector('#historyList');
        const visitData = localStorage.getItem('visit');

        if (visitData) {
            let arr = JSON.parse(visitData);
            // 使用 Map 来去除重复的历史记录,键为 item.url
            const uniqueItemsMap = new Map();
            arr.forEach(item => {
                if (!uniqueItemsMap.has(item.url)) {
                    uniqueItemsMap.set(item.url, item);
                }
            });
            // 从 Map 中获取去重后的数组
            arr = Array.from(uniqueItemsMap.values());
            let strDom = '';

            arr.forEach(item => {
                strDom += `
                    <div style="position: relative; overflow: hidden;" class="listwidth cmslistwidth">
                        <a href="${item.url}" style="overflow: hidden; position: relative">
                            <div class="" style="overflow: hidden; width: 100%; height: 100%;">
                                <div class="" style="position: relative; width: 100%; height: 100%;">
                                    <img class="cmslazyload" style="width: 100%; height: 100%; border-radius: 10px; object-fit: cover;" src="${item.imgUrl}" data-original="${item.imgUrl}">
                                </div>
                            </div>
                            <div style="position: absolute;" class="cms-seo026-vod-info">
                                <div class="cms-seo025-padding">
                                    <div style=" color: #fff;" class="cms-seo025-name">${item.name}</div>
                                    <div class="cms-seo025-margin" style="display: flex; align-items: center;">
                                        <span>${item.tag}</span>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                `;
            });
            hlHistory.innerHTML = strDom;
        } else {
            hlHistory.innerHTML = '<div class="histpre"><span>暂无播放记录</span></div>';
        }
    }
    // 短暂延迟后填充历史记录,以确保加载元素
    setTimeout(populateHistory, 1000);
</script>
最后修改:2025 年 01 月 21 日

感谢看完,可以点个赞~请作者喝杯咖啡~ヾ(◍°∇°◍)ノ゙❤