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

推荐订阅源

Security Latest
Security Latest
Recent Commits to openclaw:main
Recent Commits to openclaw:main
T
Threatpost
NISL@THU
NISL@THU
A
Arctic Wolf
C
CXSECURITY Database RSS Feed - CXSecurity.com
T
Tenable Blog
O
OpenAI News
Know Your Adversary
Know Your Adversary
Google Online Security Blog
Google Online Security Blog
Cloudbric
Cloudbric
PCI Perspectives
PCI Perspectives
爱范儿
爱范儿
GbyAI
GbyAI
U
Unit 42
IT之家
IT之家
Cyberwarzone
Cyberwarzone
T
The Exploit Database - CXSecurity.com
罗磊的独立博客
Last Week in AI
Last Week in AI
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
Hacker News - Newest:
Hacker News - Newest: "LLM"
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
AWS News Blog
AWS News Blog
Schneier on Security
Schneier on Security
L
LINUX DO - 最新话题
Latest news
Latest news
Hacker News: Ask HN
Hacker News: Ask HN
W
WeLiveSecurity
TaoSecurity Blog
TaoSecurity Blog
Attack and Defense Labs
Attack and Defense Labs
Scott Helme
Scott Helme
Security Archives - TechRepublic
Security Archives - TechRepublic
S
Securelist
Help Net Security
Help Net Security
C
Cybersecurity and Infrastructure Security Agency CISA
V
V2EX
S
Security @ Cisco Blogs
月光博客
月光博客
P
Proofpoint News Feed
B
Blog RSS Feed
The GitHub Blog
The GitHub Blog
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
Hugging Face - Blog
Hugging Face - Blog
L
LangChain Blog
博客园 - 叶小钗
C
Check Point Blog
腾讯CDC
The Cloudflare Blog
Simon Willison's Weblog
Simon Willison's Weblog

HCLonely Blog

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('');

鸣谢

赞赏作者

扫一扫支付