JQUERY制作网站添加到缓存收藏夹方法
对于一些素材类网站，用户浏览了某个素材之后，比较感兴趣，为了方便下次浏览，往往会把喜欢的素材添加到收藏夹里。这时我们可以制作这样的收藏夹功能。
下面介绍一下使用JQUERY制作网站添加到缓存收藏夹方法。
方法/步骤
- 首先制作一个“加入收藏”按钮；
<span class="soucang">点击收藏</span>
- 再添加一下显示收藏内容的DIV；只需要是一个空的UL标签即可。
<ul class="sclist"></ul>
- 引入JQUERY，这个是必须的，代码是在JQ的基础上运行的。
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
- 最后就是最关键的JS代码了，这就是由于把用户浏览的当前页面信息，保存到浏览器缓存里。
<script>
$(function () {
if(!window.localStorage){
alert("浏览器支持localstorage");
}else{
var storage=window.localStorage;
/*1. 默认根据历史记录显示历史列表*/
var historyListJson = storage.getItem('historyList') || '[]';
var historyListArr = JSON.parse(historyListJson);
/*遍历数组找到对应数据*/
var render = function () {
// 需要渲染的数据
var html = '';
console.dir(historyListArr);
for(var t=0;t<historyListArr.length;t++){
html += '<li><a href="'+ historyListArr[t].wzurldz +'">' + historyListArr[t].wztitle + '</a><a data-index="' + t + '" href="javascript:;">删除</a></li>'
};
/*如果historyListJson内容为空，获取不到数据*/
html = (html.length < 1) ? '没有搜索的记录' : html;
/*渲染到界面中*/
$('ul.sclist').html(html);
};
render();
//2. 点击搜索的时候更新历史记录渲染列表
$('.soucang').on('click', function () {
var wzshuzu = {
wztitle:document.title.replace(' _ WP模板阁', ''),
wzurldz:window.location.href
};
if(JSON.stringify(historyListArr).indexOf(JSON.stringify(wzshuzu))==-1){
historyListArr.unshift(wzshuzu); // 进行添加操作
// 保存起来，追加到historyList(json格式），不能直接存入数组，需要转换为json格式的字符串
storage.setItem('historyList', JSON.stringify(historyListArr));
}else{
alert('已在收藏夹！')
}
// 渲染到界面
render();
// 操作完成后清空输入框的内容
$('.soucang').text('已收藏');
});
// 3. 点击删除的时候删除对应的历史记录渲染列表（与存储的索引有关系）
$('ul').on('click', 'a', function () {
var index = $(this).data("index");
// 根据索引找到要删除的数据,找到index那一条，删除一个
historyListArr.splice(index, 1);
// 保存数据
storage.setItem('historyList', JSON.stringify(historyListArr));
// 渲染到界面
render();
});
// 4. 点击清空的时候清空历史记录渲染列表
$('.del_all').on('click', function () {
// 清空
historyListArr = [];
storage.setItem('historyList', '[]');
// 渲染到界面
render();
})
}
})
</script> - 这样在我们自己做网站时，就可以制作让用户点击保存的收藏夹了。