【免费下载链接】awesome-talksAwesome Talks Curated By the Community项目地址https://gitcode.com/gh_mirrors/awe/awesome-talks点击查看免费下载还在为「收藏了一堆技术演讲视频换个浏览器就全没了」而头疼吗开源项目 awesome-talks 用一个非常聪明的方案解决了这个问题收藏夹Favorites和已看记录Watched直接保存在你浏览器的 Cookies 里离线也能用、无需登录账号、365 天不过期。本文带你完整解析这套「收藏不丢」机制的实现原理与使用方法。一分钟了解 awesome-talks 的核心功能awesome-talks 是一个由社区共同整理的技术演讲Tech Talks合集网站聚合了来自各大会议的精彩视频。它的三大核心功能正是本文主角❤️收藏夹Favorites一键收藏喜欢的演讲稍后回看️已看记录Watched标记看过的视频不再重复Cinema Mode影院模式全屏沉浸式观看这三个功能全部依赖本地存储数据只存在于你自己的浏览器中——这也意味着它不会丢到服务器只跟你的设备走。一键收藏Heart 按钮是如何工作的在任意视频卡片上你会看到两颗小图标心形收藏和眼睛已看。点击心形按钮时前端会触发一次本地 GraphQL 变更mutation流程如下组件 src/Components/Favorite/index.js 捕获点击事件调用 src/Queries/Local/ADD_FAVORITE.js 定义的addFavorite操作状态层把该视频的 id 追加进favorites数组并同步写入本地存储页面自动刷新心形变成「已点亮」状态再次点击则会调用removeFavorite将其移除——整个过程不发任何网络请求所以飞快。「已看」标记让看过的视频自动现形眼睛图标对应的是已看记录功能入口在 src/Components/Watched.js。它的工作原理与收藏完全对称首次勾选 → 执行addWatched视频 id 加入watched列表再次取消 → 执行removeWatched从列表中剔除列表状态通过watched.includes(id)实时驱动勾选框的 UI配合 src/Components/HideViewed/index.js 提供的Hide Watched Talks隐藏已看视频开关你可以在主列表页一键把看过的内容全部藏起来专注刷还没看的新演讲。收藏不丢的秘密Cookies 本地存储这是整个功能最关键的一环。打开 src/Utils/state.js 你会看到两组核心常量Cookie 键名用途favorites__awesome-talks收藏视频 id 列表watched__awesome-talks已看视频 id 列表setStorage函数在每次变更时都会把数据序列化后写入 Cookie并设置expires: 365365 天有效期。这就是「收藏不会丢」的直接答案✅ 关闭浏览器、刷新页面 → 数据原样恢复✅ 一年内反复访问 → 记录持续有效✅ 完全离线 → 数据不依赖任何服务端而页面加载时src/Utils/stateLink.js 会先用getStorage把 Cookie 中的旧数据读出来作为初始状态再注册addFavorite、removeFavorite、addWatched、removeWatched四个本地 resolver实现「读-改-写」的完整闭环。 小提示由于数据存在 Cookies 中清理浏览器 Cookie 或更换设备都会导致记录消失。重要收藏建议截图留底哦。收藏夹专属页面Favorites所有收藏会集中展示在独立的收藏夹页面源码位于 src/Pages/Favorites.js。页面逻辑非常直观先从本地状态读出favoritesid 列表见 src/Queries/Local/GET_FAVORITES.js用这批 id 向远端数据源查询完整视频信息渲染成一排可播放的视频卡片这意味着即使视频列表本身需要网络你的收藏关系本身始终安全地躺在本地随时可以重新拉取详情。总结这套本地收藏方案值得学习awesome-talks 用不到百行的代码就实现了完整的收藏/已看体系思路清晰、零后端依赖状态集中管理所有本地状态统一走state.jsstateLink.js键名规范、读写分离变更即持久化每次 mutation 同时更新内存状态和 Cookie天然一致UI 与状态解耦收藏按钮只负责触发操作勾选态完全由数据驱动对于想做「轻量级个人记录」功能的前端开发者来说这套 Cookies 本地 GraphQL 状态的模式是一份很好的参考样本。赞分享【免费下载链接】awesome-talksAwesome Talks Curated By the Community项目地址https://gitcode.com/gh_mirrors/awe/awesome-talks点击查看免费下载相关推荐RT-DETR-L无线表格单元格检测ONNX模型部署方案跨平台应用完全手册RT DETR L无线表格单元格检测ONNX模型部署方案跨平台应用完全手册 欢迎来到飞桨PaddlePaddle的RT DETR L无线表格单元格检测ONNX收藏了 4.7k star 的作业集你的学习并不会开始——『收藏夹吃灰』的真相与破法收藏了 4.7k star 的作业集你的学习并不会开始——『收藏夹吃灰』的真相与破法 一个 4.7k star 的作业集出现在日榜上你点了收藏然后它永远留文档教程课程作业为什么你收藏的笔记全都没用second-brain-os用AI Agent一晚解决为什么你收藏的笔记全都没用second brain os用AI Agent一晚解决 你有没有这样的经历书签夹里躺着 400 篇以后再看的文章稍后读创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考