零基础学做网站培训介绍

当前位置:

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. 这样在我们自己做网站时,就可以制作让用户点击保存的收藏夹了。

发表评论

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

相关教程

  • 什么是JQUEYR 链式操作JQUEYR链式操作简单的说就是通过JQUEYR代码控制不同的样式,可以将代码写在一起,这样可以节省代码量,将完成不同功能的代码写
  • JS eval函数作用是什么 (1189 次浏览)
    我们自己做网站时,经常在代码里看到JS eval函数,很多新手不太明白JS eval函数的作用是什么,在什么情况下使用JS eval函数。下面学做网站论坛就来介
  • 做网站时,form表单是使用submit()提交的,但是要实现无刷新的提交,当然无刷新提交数据,ajax肯定可以完成,但是由于代码已经很成熟,都是使用form提
  • 我们自己做网站时,有时希望第一次打开某个页面时,弹出一个窗口,以后再打开页面时,就不显示这个弹窗了。实现这样的效果就需要使用JS,通过JS可以实
  • 在做网站时,经常会用天网站提示框,比如用户投稿功能,用户投稿成功之后,弹出一个提示框。常用的方法是使用JS的alert弹窗,但是这种弹窗需要人工点
  • 使用JS获取网页URL地址及各类参数是网站制作过程中经常用到,例如通过JS获取完整URL,通过JS获取获取文件路径(文件地址)等等。下面汇总了JS获取网
  • 通过获取当前点击链接的值,然后将这个值传值并赋值其它元素,这个功能非常有用。具体使用方法如下:HTML代码:<div class="con">
  • 通常情况下,我们提交一个form表单,需要使用button按钮来实现,但是在实际开发过程中往往点击form表单之外的元素来提交表单。另外有时一个网页上会有
  • jquery怎么自动给input的value赋值,很多新手都不知道怎么操作,下面介绍一下操作方法。方法/步骤首先我们用Dreamweaver新建html文档,并保存。如
  • 有些网站中有这样的效果,当点击一个按钮后,出现一个弹窗,然后其余的部分背景都变成黑色,如下图:如何实现这种点击后弹窗并且全屏背景变黑的效果