JQUERY制作网站添加到缓存收藏夹方法

对于一些素材类网站，用户浏览了某个素材之后，比较感兴趣，为了方便下次浏览，往往会把喜欢的素材添加到收藏夹里。这时我们可以制作这样的收藏夹功能。

下面介绍一下使用JQUERY制作网站添加到缓存收藏夹方法。

方法/步骤

1. 首先制作一个“加入收藏”按钮；

   
   <span class="soucang">点击收藏</span>
   
   

2. 再添加一下显示收藏内容的DIV；只需要是一个空的UL标签即可。

   
   <ul class="sclist"></ul>
   
   

3. 如果想显示收藏夹的数量，可以加一个span标签

   
   <span class="cart_num">0</span>
   
   

4. 引入JQUERY，这个是必须的，代码是在JQ的基础上运行的。

   
   <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   
   

5. 最后就是最关键的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:;" class="fright">删除</a></li>'
   
   };
   
   
   
   //显示收藏夹里的数量
   
   $('span.cart_num').text(historyListArr.length);
   
   /*如果historyListJson内容为空，获取不到数据*/
   
   html = (html.length < 1) ? '没有搜索的记录' : html;
   
   /*渲染到界面中*/
   
   $('ul.sclist').html(html);
   
   };
   
   render();
   
   //2. 点击收藏的时候更新历史记录渲染列表（这是收藏当前页面，也可以一个页面收藏多个产品，只要给点击按钮添加data属性）
   
   $('.soucang').on('click', function () {
   
   var wzshuzu = {
   
   wztitle:document.title,
   
   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));
   
   //收藏夹数量变化，成功+1
   
   var num =$('span.cart_num').text();
   
   $('span.cart_num').text(Number(num)+1*1);
   
   }else{
   
   alert('已在收藏夹！')
   
   }
   
   // 渲染到界面
   
   render();
   
   // 操作完成后清空输入框的内容
   
   $('.soucang').text('已收藏');
   
   });
   
   // 3. 点击删除的时候删除对应的历史记录渲染列表（与存储的索引有关系）
   
   $('ul.sclist').on('click', 'a.fright', 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>
   
   

6. 这样在我们自己做网站时，就可以制作让用户点击保存的收藏夹了。