惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
J
Java Code Geeks
B
Blog
腾讯CDC
博客园 - 三生石上(FineUI控件)
S
SegmentFault 最新的问题
H
Hackread – Cybersecurity News, Data Breaches, AI and More
博客园 - Franky
罗磊的独立博客
月光博客
月光博客
Jina AI
Jina AI
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
D
Docker
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
G
Google Developers Blog
V
Visual Studio Blog
I
InfoQ
有赞技术团队
有赞技术团队
D
DataBreaches.Net
Microsoft Security Blog
Microsoft Security Blog
WordPress大学
WordPress大学
阮一峰的网络日志
阮一峰的网络日志
宝玉的分享
宝玉的分享
Blog — PlanetScale
Blog — PlanetScale

HCLonely Blog

HCLonely Blog - 记一次Alt-Tab导致资源管理器崩溃(0xc0000005)原因排查 HCLonely Blog - 让OpenWrt控制台进入赛博空间:luci-theme-cyberpunk HCLonely Blog - Artitalk V4: 从Leancloud迁移至Vercel HCLonely Blog - 记一次hexo-bilibili-bangumi分时函数渲染优化 HCLonely Blog - IP签名图片生成服务 HCLonely Blog - 树莓派搭建私有在线PS网站 HCLonely Blog - 将 Node.js 项目打包为一个可执行文件 HCLonely Blog - 哔哩哔哩硬核会员搜题脚本 HCLonely Blog - 统一推送服务Nodejs API HCLonely Blog - 在线答题搜答案脚本 HCLonely Blog - 青年大学习安卓跳过方法 HCLonely Blog - 公主连结 Re:Dive 中文输入法词库 HCLonely Blog - 基于 NodeJs 的 live2d 后端 Api 服务器 HCLonely Blog - 百度分析和谷歌分析适配 pjax HCLonely Blog - hexo-calendar 活动日历插件 HCLonely Blog - Git 免密、免 SSH 进行 push & pull HCLonely Blog - 一款基于 webstack 的 hexo 主题 HCLonely Blog - 使用 cron-job 解决 LeanCloud 因流控原因自动唤醒失败的问题 HCLonely Blog - Valine 添加验证码、博主标签及评论微信、QQ 通知 HCLonely Blog - 使用 Cloud Studio 在线搭建、编辑、部署 Hexo HCLonely Blog - 给你的网页添加一个 moc3 格式的 Live2d 模型 HCLonely Blog - Hexo-tag-steamgame 插件 HCLonely Blog - Hexo-online-server 在线编辑发布文章插件 HCLonely Blog - Hexo 博客美化
HCLonely Blog - 在静态网站上实现浏览记录功能
博主:HCLonely · 2023-02-03 · via HCLonely Blog

在静态网站上实现浏览记录功能

文章二维码

扫一扫手机观看

  • 发布时间:
  •  次浏览
  • 339 字数
  • 分类:JavaScript
  1. 首页
  2. 正文  
  3. 分享到:

本文最后更新于天前,内容可能已不再适用!

在静态网站上实现浏览记录功能,浏览记录保存在用户本地

安装

  1. 下载visit-history.min.js文件;

  2. 在你的网页中插入

    <script src="path/to/visit-history.min.js"></script>
    

或直接使用CND

<script src="https://cdn.jsdelivr.net/gh/HCLonely/visit-history@1visit-history.min.js"></script>

使用

保存浏览记录

const { visitHistory } = require('visit-history');

visitHistory.set({
  data: { }, // [必需]保存的数据
  identifier: () => window.location.pathname, // [可选]网页的位移标识符, 默认为 () => window.location.pathname
  limit: 20 // [可选]最大保存的浏览历史数量,默认为 20
});

Example:

const { visitHistory } = require('visit-history');

visitHistory.set({
  data: {
    title: document.querySelector('title').innerText.trim(),
    link: window.location.href
  },
  identifier: () => window.location.href,
  limit: 30
});

读取浏览记录

const { visitHistory } = require('visit-history');

visitHistory.get({
  htmlTemplate: '', // [可选]Html模板, 使用'{{key}}'替换data中的变量. 留空则返回保存的data数据, 默认为空
  limit: 10 // [可选]读取的浏览记录数量, 留空则返回所有数据, 默认为空
});

Example:

const { visitHistory } = require('visit-history');

const history = visitHistory.get({
  htmlTemplate: '<div class="title><a href="{{link}}">{{title}}</a></div>',
  limit: 10
});
document.querySelector('.history').innerHTML = history.join('');

鸣谢

赞赏作者

扫一扫支付