学做网站培训课程介绍

当前位置:

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

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

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

方法/步骤

  1. 首先制作一个“加入收藏”按钮;
    
    
    <span class="soucang">点击收藏</span>
  2. 再添加一下显示收藏内容的DIV;只需要是一个空的UL标签即可。
    
    
    <ul class="sclist"></ul>
  3. 引入JQUERY,这个是必须的,代码是在JQ的基础上运行的。
    
    
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  4. 最后就是最关键的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>
  5. 这样在我们自己做网站时,就可以制作让用户点击保存的收藏夹了。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 我们常用click()来绑定点击事件,但当我们要执行的元素是通过JQUERY生成的时候,就会出现点击无效的情况。下面介绍一下解决JQUERY点击事件无效的方法
  • 我们在做网站的多条件筛选功能时,经常需要通过获取URL里的参数值进行查询。在多条件筛选时,有多个参数值,不同的选择将传递不同的参数,这时我们需
  • 在做网站时,有些网页只是暂时性的展示提示信息,只要信息展现之后,就没有再显示的必要。这时,就需要它在指定时间内自动关闭。例如:我们点击一个
  • 在做网站时, 往往需要通过JS或jquery代码来获取指定元素的父级、同级、子元素,然后进行控制。下面介绍一下JS与jquery获取父级、同级、子元素的方法
  • 我们知道,网站上有很多的超链接,是使用A标签进行书写的。A标签的链接地址就是写在HREF里面。但是某些情况下,虽然HREF里已经写了链接地址,但我们想
  • 一些网站的栏目比较多,例如在制作门户网站时,如果想在一个页面上显示更多的内容又不增加页面篇幅,特别有效的方法就是使用tab标签切换来显示。效果
  • 什么是JQUEYR 链式操作JQUEYR链式操作简单的说就是通过JQUEYR代码控制不同的样式,可以将代码写在一起,这样可以节省代码量,将完成不同功能的代码写
  • JS eval函数作用是什么 (1924 次浏览)
    我们自己做网站时,经常在代码里看到JS eval函数,很多新手不太明白JS eval函数的作用是什么,在什么情况下使用JS eval函数。下面学做网站论坛就来介
  • 做网站时,form表单是使用submit()提交的,但是要实现无刷新的提交,当然无刷新提交数据,ajax肯定可以完成,但是由于代码已经很成熟,都是使用form提
  • 我们自己做网站时,有时希望第一次打开某个页面时,弹出一个窗口,以后再打开页面时,就不显示这个弹窗了。实现这样的效果就需要使用JS,通过JS可以实