motolog

Everything I love in my life.

Rails で jquery.cookie.js を使って閲覧履歴を表示してみた

jquery.cookie.js と Rails の cookies を使うと、簡単に履歴表示機能を実装することができた。
item オブジェクトが id 属性と name 属性を持っている場合の実装例を書いてみた。

jquery.cookie.jsでクッキーを保存

$(function(){
  var item = "<%= @item.id %>";
  var cookie_name = 'recently_viewed_items';
  var viewed_items = [];
  var delete_item = false;
  $.cookie.defaults.path = "/";

  // 既にクッキーが存在している場合は、ストリングを配列にする
  if($.cookie(cookie_name)){
    viewed_items = $.cookie(cookie_name).split(",");
  }

  // 重複していなければ、itemを配列に追加
  if($.inArray(item, viewed_items)<0){
    viewed_items.push(item);
  }

  // 5個以上ならば1つ削除
  if (viewed_items.length >= 5){
    viewed_items.shift();
  }

  // 配列をクッキ―に保存
  $.cookie(cookie_name, viewed_items);

});


Railsのcookiesを利用してview側で表示を制御

<h2>
  最近チェックしたアイテム
</h2>
<% items = [] %>
<% items = cookies[:recently_viewed_items].split(",") unless cookies[:recently_viewed_items].nil? %>
<% items.each do |id| %>
  <% item = Item.find(id) %>
    <%= item.name %>
<% end %>


jquery 側の実装で item が持つ id を1つの string としてクッキーに保存し、そのクッキーの情報を Rails の view側で1つ1つの id に分解しそれぞれの item の name を表示してみた。

jqueryとRailsのクッキーを使えばこんな簡単にできてしまうという。すごいすごい。



参考にさせてもらった記事

Rails cookies の細かな設定などは上記の記事を確認してみてください。
まだまだ修行中の身なので、おかしな点やもっと効率良くできる点などありましたら、教えていただけると幸いです。

@motokiyoshida

© 2018 Motoki Yoshida