勉強したことのメモ

webプログラマが勉強したことのメモ。

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

      2022/07/21

フロントエンド側で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

  関連記事

Flashを用いずJavaScriptでコピー&カット機能を実装する

以前メモったようなFlashを用いる方法ではなく、WebAPIでコピー& ...

円形のプログレスバーをprogressbar.jsで実装する方法

円形のプログレスバーを実装したかった。CSSだったり画像を用いたりする方法もあっ ...

jQueryとCSSの連携

$(function(){ $("#change_small").click(f ...

jQuery Alert Dialogsで表示後に処理したい

最近携わったサイトの中でJavaScript内に「jAlert」とかいう記述があ ...

迷惑メール対策でフォームにreCAPTCHAを導入する方法

スパムメール対策として問い合わせフォームにreCAPTCHAを導入したいという件 ...

tableのヘッダーを残して表示(jquery-decapitate)

bootstrapはあまり使わないので切り離して使えるように したいところ。 ■ ...

submit関連のjQuery2

<?php error_reporting(E_ALL & ~E_ ...

JavaScriptの三項演算子

いつもと違う書き方? 使い方の三項演算子が あったのでメモ。 ■ソース var ...

Highstockの使い方とカスタマイズ

株価などの値動きを図表とするローソク足のグラフを何らかの方法で描写したかった。調 ...

lightboxでCSPエラーが発生

CSP(コンテンツセキュリティポリシー)設定を行っているサーバーでLightbo ...