cookieを使ったいいね機能を初めて実装してみた。jquery.cookie.js
これまで自分が作ってきたいいね機能といえば、データベースにLikeテーブルを作ってどのユーザーがどの投稿にいいねしたかでいいねを実装していた。 課題として与えられたいいね機能はユーザテーブルはなく、のいいね機能だった為、cookieを使ったいいね機能の実装をした。
jquery.cookie.jsを使うとあっという間だった。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
そして以下がコード
$('.like').on('click',function(){ //cookieのNameに投稿のID Nameに'liked'を追加 有効期限は365日に設定 365日をすぎると、cookieが消去される 違う画面(URL)でもこの機能を使いたいので、pathを'/'に設定 $.cookie($(this).attr("id"),"liked",{expires: 365,path:'/'}); //いいねボタンを押したら、fontを変えるためclassを追加 $(this).addClass('is-active'); return false; });
詰まったとこ
・(this)を使っていなかったため、いいねを押すと、そのページの全投稿にいいねが押される状態になってた。 おそらく、どのボタンをクリックしたのかを判断できていなかったから。
・idに一意な名前をつけてなかった。僕の場合、class名とid名が同じになっていて、しかもidでクリックイベントを発生させていた為、挙動がうまく行かなかった。 なので、idを一意な名前にし、classでイベントを発生させるようにした。これは同期の方から教えてもらいました。