Webサービスを作って潰すのが趣味な人のブログ

とりあえず作ってから怒られよう

【Rails】RailsとJQueryでCookieを相互に利用したい時に気をつけるべき2つの注意点

「JQueryからcookieを操作したい」

結構遭遇する悩みだと思います。閲覧履歴だったりメニュー開閉などの情報を保存するだったりcookieを利用する場面は多いのではないでしょうか

 

RailsとCookie

そもそもRailsでは簡単にcookieの設定が出来るようになっていて、こんな感じで変数に値を格納するだけでcookieにいい感じに保存してくれます

 

cookies[:key] = "hoge"

 

RailsだけでCookie操作をやりたいなら、なんらかのactionに対して$.ajaxやlink_to remote: true などでサーバー側に非同期通信を走らせて、サーバー側でcookieを操作すればOKです

ただそんなことのためにわざわざサーバーと通信するのもナンセンスな感じはしてしまいますしどうせJQueryかますならJQueryでCookieも操作したほうが楽ですよね

 

※勿論認証が必要だとかDBアクセスが必要だとかって話ならサーバー側でやっちゃったほうが良いのでケースバイケースではあります。

 

JQueryからCookieにアクセスするには

$.cookie(JQuery.cookies)というpluginがありまして、これの導入自体は簡単なので省略

github.com

 

Railsから使うなら「jquery-cookie-rails」というgemを入れれば「bundle install」した後にrequireを「app/assets/javascripts/application.js」に追記するだけなので簡単です

github.com

 

JQueryからRailsのcookieにアクセスするには

 

上のプラグインそのままで使えるのですが注意点が2点ほどありまして

 

1.pathを設定すること

Rails側の設定を変えていないかぎりpathが指定されていると思います。JQuery側でもpathを指定してやらないと相互に読み書きできなくなりますので注意して下さい。

 

$.cookie.defaults.path = "/";

 

Railsではcookieのデフォルトパスとして「/」が設定されているのでJSでcookieを操作したい所に上の一文を書いおくだけでOKです

 

2.有効期限を設定すること

「値の生成も書き込みも出来るけれどブラウザを更新するとcookieが消えてしまう」という問題が発生したなら恐らく有効期限の設定ミスです。

 

$.cookie('cookie_name', value, { expires: 365 });

 

cookieを書き込むときはこんな感じで有効期限を付与してやって下さい。上の例だと365=365dなので1年後ということになります。

ほかにも設定の仕方はいくつかあるのですが詳しくは以下の記事を見るかぐぐって下さい

qiita.com

 

ということで

全然気付かずに結構はまったので一応メモしておきます

ちなみにちょっと込み入った値を格納したい場合はjson形式でパースして保存するといい感じに復元できるのでおすすめです

そこらへんも興味ある人は上の記事を見るかぐぐってみてください