JQuery/PHP

PHP+JQUERY制作网站点击收藏功能(localStorage数据存储)

阿里云

在一些商城网站中有点击收藏功能,当用户浏览某一个商品时,觉得很喜欢,就可以先把它收藏起来,方便以后浏览。效果如下图:

那么在自己做网站时,怎么制作这种网站点击收藏功能呢?下面就来介绍一下网站点击收藏功能制作方法。

第一步:先制作一个收藏点击的按钮;

也想出现在这里?联系我们
创客主机
  1. <script type="text/javascript" src="js/jquery.cookie.js"></script>
  2. <span title="收藏" class="scc"><i>收藏</i></span>

第二步:给收藏按钮添加一个 JQUERY 事件,用于点击后,将信息存储到 localStorage 数据中。

  1. var wpmbgArray = JSON.parse(localStorage.getItem('wpmbgidcc')) ? JSON.parse(localStorage.getItem('wpmbgidcc')) : [];
  2. var postids = '数据的值';
  3. $(".mb_shuomin_share .scc").click(function(){
  4. if (wpmbgArray.indexOf(postids) <= -1){
  5. wpmbgArray.unshift(postids);
  6. localStorage.setItem('wpmbgidcc',JSON.stringify(wpmbgArray));
  7. alert('收藏成功,可在“登录--我的订单--我的收藏” 查看!');
  8. }else{
  9. alert('此模板已收藏,无需再次收藏,可在“登录--我的订单--我的收藏” 查看!');
  10. return false;
  11. }
  12. })

第三步:在用户的个人中心页面展示用户的收藏信息。由于 PHP 无法直接读取 localStorage 数据。所以可以先将 localStorage 数据读取出来然后转存到 COOKIE 里。

  1. var nowwpmbgidcc = JSON.parse(localStorage.getItem('wpmbgidcc'));
  2. var nowwpmbgidcc = $.cookie('wpmbgidccs', nowwpmbgidcc);

第四步:通过 PHP 的 for 循环将 COOKIE 里的数据打印出来;

  1. $usersoucang = $_COOKIE['wpmbgidccs'];
  2. if($usersoucang){
  3. $usersoucangarr = explode(",",$usersoucang);
  4. for($m=0;$m<20;$m++){
  5. echo $usersoucangarr[$m];
  6. }
  7. }

这样就通过 PHP+JQUERY 制作好了网站点击收藏功能了。

PHP+JQUERY 制作网站点击收藏功能(localStorage 数据存储)

已有 218 人购买
查看演示升级 VIP立刻购买

收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!