勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

jquery.cookie.jsで「$.cookie is not a function」エラー

   2022/07/21  jQuery JavaScript

フロントエンド側でCookieを利用したい場合jquery-cookieを用いることが多いが同プラグインで実装した際、環境によっては「$.cookie is not a function」というエラーが発生し、Cookieの操作が行えないということがあった。以下に対応方法をメモ。

 

原因?

jquery-cookieは開発が終了しており、そちらが原因かもしれない(jQueryのバージョンが新しいとダメなのかも)。こちらのページが参考になった。

 

対応方法

jquery-cookieからjs-cookieに変更した。まず公式サイトからJSファイルをダウンロードするか以下CDNでJSファイルを呼び出す。

<script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.1/dist/js.cookie.min.js"></script>

異なるバージョンを使用したい場合は以下から探す。

https://www.jsdelivr.com/package/npm/js-cookie

 

次にソースコードを以下の通り書き換える。

//cookie取得
//旧バージョン
$.cookie('name');
//新バージョン
Cookies.get('name');

//cookie保存
//旧バージョン
$.cookie('name', 'value');
//新バージョン
Cookies.set('name', 'value');

//cookie削除
//旧バージョン
$.removeCookie('name');
//新バージョン
Cookies.remove('name');

互換性があるようで新バージョンでも過去記事の時間指定も行えた。

 

所感

jquery-cookieで実装したシステムは複数あるのでcookie関連でのエラーが出てきた時用に覚えておきたいところ。

 - jQuery JavaScript

  関連記事

jQueryで画像を遅延ロードする「jquery.lazyload.js」の利用方法

画像を遅延ロードさせたい時にはjQueryプラグインのlazyloadが便利。以 ...

jQueryで要素を移動する方法のまとめ

jQueryで要素を移動する際、insertBefore / insertAft ...

「slick」でブラウザ幅がPCの場合はスライダーを表示し、スマホ幅の場合はスライダー無しにする方法

slickプラグインで画像スライダーを設置しているページがあり、PCのブラウザ幅 ...

セレクトメニュー(プルダウン)をdisplay:none;指定してもiPhoneのみ非表示にならない問題の対応方法

セレクトメニュー(プルダウン)に対してdisplay:none;指定したりjQu ...

jQueryでHTMLの特定要素をループ時に逆順で処理する方法

jQueryでリスト(li)タグ等の特定要素をeach()でループ処理する場合、 ...