勉強したことのメモ

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

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

   

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

  関連記事

Chart.jsで横スクロール可能なグラフを表示

Chart.jsで折れ線グラフを表示するページがあった。過去1年分のデータをグラ ...

Ajaxでプラグイン無しのファイルアップロード

画像ファイルを添付できて、尚且つAjaxを用いた非同期通信のフォームを作りたかっ ...

adblock(広告削除)設定している場合はページを表示させない

iPhoneのSleipnirでネットをしていると「広告がブロックされたのでペー ...

jQueryのloadメソッドでファイル(ページ)を呼び出す

サイト内でヘッダーやフッター等共通のパーツはそれぞれ別ファイルに分けてPHPのi ...

jQueryで偶数or奇数行にclassを付与

やりたかった事は、 ・PHPは使えなくてjavascriptかjQueryを使用 ...

JavaScriptでフォームの禁止ワード制限

掲示板等で本文を送信する際に、予め定めていた禁止ワードが含まれていないかチェック ...

さくらレンタルサーバでCookieが保存できない

さくらインターネットのレンタルサーバでjquery.cookie.jsを用いてC ...

JavaScriptのvarとletとconst

JavaScript関連の調べ物をしていた際、変数の宣言時にvarではなくlet ...

javascriptでブラウザ判別&ページ遷移

var userAgent = window.navigator.userAge ...

Jcropを使ってブラウザ上で画像を範囲指定して切り抜き(トリミング)

やりたかった事は、画像をアップロードして必要な部分のみを範囲指定してもらい、指定 ...