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

推荐订阅源

奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
WordPress大学
WordPress大学
aimingoo的专栏
aimingoo的专栏
博客园 - 聂微东
M
MIT News - Artificial intelligence
Microsoft Security Blog
Microsoft Security Blog
云风的 BLOG
云风的 BLOG
Google DeepMind News
Google DeepMind News
Apple Machine Learning Research
Apple Machine Learning Research
H
Hackread – Cybersecurity News, Data Breaches, AI and More
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
O
OpenAI News
N
News and Events Feed by Topic
TaoSecurity Blog
TaoSecurity Blog
有赞技术团队
有赞技术团队
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
MyScale Blog
MyScale Blog
酷 壳 – CoolShell
酷 壳 – CoolShell
Hacker News: Ask HN
Hacker News: Ask HN
Help Net Security
Help Net Security
爱范儿
爱范儿
W
WeLiveSecurity
V2EX - 技术
V2EX - 技术
Forbes - Security
Forbes - Security
Hacker News - Newest:
Hacker News - Newest: "LLM"
SecWiki News
SecWiki News
A
About on SuperTechFans
Cloudbric
Cloudbric
N
Netflix TechBlog - Medium
博客园 - 司徒正美
S
Security @ Cisco Blogs
Martin Fowler
Martin Fowler
Schneier on Security
Schneier on Security
I
InfoQ
Engineering at Meta
Engineering at Meta
Google Online Security Blog
Google Online Security Blog
T
Troy Hunt's Blog
Latest news
Latest news
N
News and Events Feed by Topic
Security Archives - TechRepublic
Security Archives - TechRepublic
Spread Privacy
Spread Privacy
NISL@THU
NISL@THU
B
Blog
L
LINUX DO - 最新话题
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
V
V2EX
J
Java Code Geeks
N
News | PayPal Newsroom
T
Tor Project blog
The GitHub Blog
The GitHub Blog

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

鸣谢

赞赏作者

扫一扫支付