建站教程 2022-04-28

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

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

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

第一步：先制作一个收藏点击的按钮；

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

<div class="codecolorer-container javascript geshi" style="overflow:auto;white-space:nowrap;width:100%;"><div class="javascript codecolorer" style="white-space:nowrap"><span style="color: #000066; font-weight: bold;">var</span> wpmbgArray <span style="color: #339933;">=</span> JSON.<span style="color: #660066;">parse</span><span style="color: #009900;">(</span>localStorage.<span style="color: #660066;">getItem</span><span style="color: #009900;">(</span><span style="color: #3366CC;">'wpmbgidcc'</span><span style="color: #009900;">)</span><span style="color: #009900;">)</span> <span style="color: #339933;">?</span> JSON.<span style="color: #660066;">parse</span><span style="color: #009900;">(</span>localStorage.<span style="color: #660066;">getItem</span><span style="color: #009900;">(</span><span style="color: #3366CC;">'wpmbgidcc'</span><span style="color: #009900;">)</span><span style="color: #009900;">)</span> <span style="color: #339933;">:</span> <span style="color: #009900;">[</span><span style="color: #009900;">]</span><span style="color: #339933;">;</span><br><span style="color: #000066; font-weight: bold;">var</span> postids <span style="color: #339933;">=</span> <span style="color: #3366CC;">'数据的值'</span><span style="color: #339933;">;</span><br>
$<span style="color: #009900;">(</span><span style="color: #3366CC;">".mb_shuomin_share .scc"</span><span style="color: #009900;">)</span>.<span style="color: #660066;">click</span><span style="color: #009900;">(</span><span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #009900;">{</span><br><span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">(</span>wpmbgArray.<span style="color: #660066;">indexOf</span><span style="color: #009900;">(</span>postids<span style="color: #009900;">)</span> <span style="color: #339933;">&lt;=</span> <span style="color: #339933;">-</span><span style="color: #CC0000;">1</span><span style="color: #009900;">)</span><span style="color: #009900;">{</span><br>
wpmbgArray.<span style="color: #660066;">unshift</span><span style="color: #009900;">(</span>postids<span style="color: #009900;">)</span><span style="color: #339933;">;</span><br>
localStorage.<span style="color: #660066;">setItem</span><span style="color: #009900;">(</span><span style="color: #3366CC;">'wpmbgidcc'</span><span style="color: #339933;">,</span>JSON.<span style="color: #660066;">stringify</span><span style="color: #009900;">(</span>wpmbgArray<span style="color: #009900;">)</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br>
alert<span style="color: #009900;">(</span><span style="color: #3366CC;">'收藏成功，可在“登录--我的订单--我的收藏” 查看！'</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br><span style="color: #009900;">}</span><span style="color: #000066; font-weight: bold;">else</span><span style="color: #009900;">{</span><br>
alert<span style="color: #009900;">(</span><span style="color: #3366CC;">'此模板已收藏，无需再次收藏，可在“登录--我的订单--我的收藏” 查看！'</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br><span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span><br><span style="color: #009900;">}</span><br><span style="color: #009900;">}</span><span style="color: #009900;">)</span></div></div>

<div class="codecolorer-container javascript geshi" style="overflow:auto;white-space:nowrap;width:100%;"><div class="javascript codecolorer" style="white-space:nowrap">var wpmbgArray = JSON.parse(localStorage.getItem('wpmbgidcc')) ? JSON.parse(localStorage.getItem('wpmbgidcc')) : []; var postids = '数据的值';

$(".mb_shuomin_share .scc").click(function(){ if (wpmbgArray.indexOf(postids) <= -1){

wpmbgArray.unshift(postids);

localStorage.setItem('wpmbgidcc',JSON.stringify(wpmbgArray));

alert('收藏成功，可在“登录--我的订单--我的收藏” 查看！'); }else{

alert('此模板已收藏，无需再次收藏，可在“登录--我的订单--我的收藏” 查看！'); return false; } })</div></div>

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

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

<div class="codecolorer-container php geshi" style="overflow:auto;white-space:nowrap;width:100%;"><div class="php codecolorer" style="white-space:nowrap"><span style="color: #000088;">$usersoucang</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$_COOKIE</span><span style="color: #009900;">[</span><span style="color: #0000ff;">'wpmbgidccs'</span><span style="color: #009900;">]</span><span style="color: #339933;">;</span><br><span style="color: #b1b100;">if</span><span style="color: #009900;">(</span><span style="color: #000088;">$usersoucang</span><span style="color: #009900;">)</span><span style="color: #009900;">{</span><br><span style="color: #000088;">$usersoucangarr</span> <span style="color: #339933;">=</span> <span style="color: #990000;">explode</span><span style="color: #009900;">(</span><span style="color: #0000ff;">","</span><span style="color: #339933;">,</span><span style="color: #000088;">$usersoucang</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br><span style="color: #b1b100;">for</span><span style="color: #009900;">(</span><span style="color: #000088;">$m</span><span style="color: #339933;">=</span><span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span><span style="color: #000088;">$m</span><span style="color: #339933;">&lt;</span><span style="color: #cc66cc;">20</span><span style="color: #339933;">;</span><span style="color: #000088;">$m</span><span style="color: #339933;">++</span><span style="color: #009900;">)</span><span style="color: #009900;">{</span><br><span style="color: #b1b100;">echo</span> <span style="color: #000088;">$usersoucangarr</span><span style="color: #009900;">[</span><span style="color: #000088;">$m</span><span style="color: #009900;">]</span><span style="color: #339933;">;</span><br><span style="color: #009900;">}</span><br><span style="color: #009900;">}</span></div></div>

<div class="codecolorer-container php geshi" style="overflow:auto;white-space:nowrap;width:100%;"><div class="php codecolorer" style="white-space:nowrap">$usersoucang = $_COOKIE['wpmbgidccs']; if($usersoucang){ $usersoucangarr = explode(",",$usersoucang); for($m=0;$m<20;$m++){ echo $usersoucangarr[$m]; } }</div></div>

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

由于网站搬家，部分链接失效，如无法下载，请联系站长！谢谢支持！
1. 带 [亲测] 说明源码已经被站长亲测过!
2. 下载后的源码请在24小时内删除,仅供学习用途！
3. 分享目的仅供大家学习和交流，请不要用于商业用途！
4. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
5. 本站所有资源来源于站长上传和网络，如有侵权请邮件联系站长！
6. 没带 [亲测] 代表站长时间紧促,站长会保持每天更新 [亲测] 源码 !
7. 盗版ripro用户购买ripro美化无担保,若设置不成功/不生效我们不支持退款!
8. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
9. 如果你也有好源码或者教程，可以到审核区发布，分享有金币奖励和额外收入!
10.如果您购买了某个产品，而我们还没来得及更新，请联系站长或留言催更，谢谢理解 !
GG资源网 » PHP+JQUERY制作网站点击收藏功能（localStorage数据存储）

分享到：