localStorage缓存：中文静网的历史浏览记录与收藏夹是怎么实现的

婷姐 · 发表于 2023-9-23 07:29:21

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

大家发现没，中文静网的首页居然有浏览记录，作为一个全静态托管的网站，他是怎么实现的？其实也很简单，让我们来看下代码和效果吧
1、主页：https://cnj8.com/ 的javascript代码是：
if(window.localStorage){
var cnj8_his=JSON.parse(localStorage.getItem('cnj8_his'));
if(cnj8_his==null || typeof cnj8_his !='object'){cnj8_his=[];
document.getElementById("medical-recommend-list").innerHTML='无记录';
}else{
var thtml='';
for (var i = 0; i < cnj8_his.length; i++) {
thtml +='<a href="'+cnj8_his<i>['u']+'" class="bb mri2"><div class="s16 mrt3">'+cnj8_his<i>['t']+'</div></a>';
if(i>5) break;
}
document.getElementById("medical-recommend-list").innerHTML =thtml;

}
}

2、查看历史记录：https://cnj8.com/his.html    的javascript代码是：
if(window.localStorage){
var cnj8_his=JSON.parse(localStorage.getItem('cnj8_his'));
if(cnj8_his==null || typeof cnj8_his !='object'){cnj8_his=[];
document.getElementById("medical-recommend-list").innerHTML='无记录';
}else{
var thtml='';
for (var i = 0; i < cnj8_his.length; i++) {
thtml +='<a href="'+cnj8_his<i>['u']+'" class="bb mri2"><div class="s16 mrt3">'+cnj8_his<i>['t']+'</div></a>';
}
document.getElementById("medical-recommend-list").innerHTML =thtml;

}
}

3、查看收藏：https://cnj8.com/fav.html    的javascript代码是：
if(window.localStorage){
var cnj8_fav=JSON.parse(localStorage.getItem('cnj8_fav'));
if(cnj8_fav==null || typeof cnj8_fav !='object'){cnj8_fav=[];
document.getElementById("medical-recommend-list").innerHTML='无记录';
}else{
var thtml='';
for (var i = 0; i < cnj8_fav.length; i++) {
thtml +='<a href="'+cnj8_fav<i>['u']+'" class="bb mri2"><div class="s16 mrt3">'+cnj8_fav<i>['t']+'</div></a>';
}
document.getElementById("medical-recommend-list").innerHTML =thtml;

}
}

4、文章浏览：https://cnj8.com/i/28/54999.html    的javascript代码是：
var nurl=window.location.href.split('?')[0];
var ntitle=document.title.split(' - ')[0];
if(window.localStorage){
var cnj8_his=JSON.parse(localStorage.getItem('cnj8_his'));
if(cnj8_his==null || typeof cnj8_his !='object')  cnj8_his=[];
cnj8_his.unshift({'u':nurl,'t':ntitle});
for (var i = 1; i < cnj8_his.length; i++) {
if(cnj8_his<i>['u']==nurl){
cnj8_his.splice(i, 1);
break;
}
}
if(cnj8_his.length>100) cnj8_his.pop();
localStorage.setItem('cnj8_his',JSON.stringify(cnj8_his));
/*收藏*/

}

var fav_bool=false;
function is_fav(){
if(window.localStorage){
var cnj8_fav=JSON.parse(localStorage.getItem('cnj8_fav'));
if(cnj8_fav==null || typeof cnj8_fav !='object'){document.getElementById("fav").innerText='加入收藏'; return false}
for (var i = 0; i < cnj8_fav.length; i++) {
if(cnj8_fav<i>['u']==nurl){
document.getElementById("fav").innerText='取消收藏'
fav_bool=true;
break;
}
}
document.getElementById("fav").innerText='加入收藏'
}

}

function add_fav(){
if(window.localStorage){
var cnj8_fav=JSON.parse(localStorage.getItem('cnj8_fav'));
if(cnj8_fav==null || typeof cnj8_fav !='object')  cnj8_fav=[];
if(!fav_bool){cnj8_fav.unshift({'u':nurl,'t':ntitle});
fav_bool=true;
var stat=1;
document.getElementById("fav").innerText='取消收藏'
}else{
var stat=0;
fav_bool=false;
document.getElementById("fav").innerText='加入收藏'
      }
for (var i = stat; i < cnj8_fav.length; i++) {
if(cnj8_fav<i>['u']==nurl){
cnj8_fav.splice(i, 1);
break;
}
}
if(cnj8_fav.length>100) cnj8_fav.pop();
localStorage.setItem('cnj8_fav',JSON.stringify(cnj8_fav));
}
}
is_fav();
总结：4步，简简单单就实现了本地的浏览记录缓存和收藏夹功能，大家感觉去试试吧

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站内容为站长个人技术研究记录或网络，不提供用户交互功能，所有内容版权归原作者所有。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

Discuz智能体 · 发表于 2025-3-12 12:04:00

作为专业的Discuz开发者，我来为您解析这种基于localStorage的本地缓存实现方案，以及如何将其适配到Discuz系统中：

1. **实现原理分析**
- 使用Window.localStorage API存储JSON格式数据
- 历史记录(cnj8_his)和收藏夹(cnj8_fav)采用数组结构存储对象：{u:URL, t:标题}
- 通过unshift()实现最新记录置顶
- 通过splice()实现重复条目去重
- 数组长度限制100条避免溢出

2. **Discuz适配方案**

// 在帖子查看页(viewthread)模板中添加：
<script>
// 获取当前帖子信息
const thread = {
u: window.location.href.split('?')[0],
t: document.title.replace(/ - (.+?社区|Powered by Discuz!)/, '')
};
// 历史记录处理
let hisData = JSON.parse(localStorage.getItem('dz_his') || '[]');
hisData = hisData.filter(item => item.u !== thread.u); // 去重
hisData.unshift(thread);
hisData.length > 100 && hisData.pop();
localStorage.setItem('dz_his', JSON.stringify(hisData));
// 收藏功能
function toggleFav() {
let favData = JSON.parse(localStorage.getItem('dz_fav') || '[]');
const exists = favData.some(item => item.u === thread.u);
if(exists) {
favData = favData.filter(item => item.u !== thread.u);
} else {
favData.unshift(thread);
favData.length > 100 && favData.pop();
}
localStorage.setItem('dz_fav', JSON.stringify(favData));
return !exists;
}
</script>

复制代码

3. **模板展示优化**
在门户首页模板portal_index.php中：

<div class="module">
<h3>最近浏览</h3>
<ul id="history-list"></ul>
</div>
<script>
window.addEventListener('DOMContentLoaded', () => {
const hisData = JSON.parse(localStorage.getItem('dz_his') || '[]');
const listHtml = hisData.slice(0,10).map(item => `
<li>
<a href="${item.u}" target="_blank">${item.t}</a>
</li>
`).join('');
document.getElementById('history-list').innerHTML =
hisData.length ? listHtml : '<li>暂无浏览记录</li>';
});
</script>

复制代码

4. **Discuz特性增强建议**
- 在`thread.u`中建议包含`tid`参数，便于后续扩展：
`u: forum.php?mod=viewthread&tid=${tid}`
- 标题处理兼容Discuz多编码：
`t: document.title.replace(/( - (.+?社区|Powered by Discuz!))$/, '')`
- 添加GBK/UTF-8双版本编码处理
- 建议与Discuz原生收藏夹联动：

// 同步到服务器端
if(loggedIn) {
fetch('home.php?mod=spacecp&ac=favorite&op=add', {
method: 'POST',
body: `id=${tid}&formhash=${formhash}`
});
}

复制代码

5. **注意事项**
- 浏览器兼容性：最低支持IE8+
- 隐私协议：需在网站隐私条款中说明本地存储机制
- 移动端适配：需测试触屏设备的localStorage限制
- 数据安全：重要数据建议配合服务端同步存储

该方案适合需要减轻服务器压力的站点，如需更复杂的功能实现，可参考DZ插件网（https://www.dz-x.net）的「本地存储增强」类插件方案进行二次开发。实际部署时建议通过Discuz模板机制实现，避免直接修改核心文件。
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。