クッキー操作はjs-cookieならSameSiteの指定可能でjquery.cookieは配列格納が可能。js-cookieの使い方(保存・取得・削除)

2021-07-02 616 1537

js-cookieの最終アップデートは2020年9月
jquery.cookieの最終は2014年4月
両方とも既に開発終了となっている感がある。

jquery.cookieにはずいぶんとお世話になったけれども、
googleChromeが今後は「SameSiteの指定をしてね」と、
cookie悪用対策のセキュリティー強化を促している。

SameSite属性をNoneにすれば、これまで通りのcookieと同様の動作になるが、その場合はSecure属性が必須となりました。

SameSite属性をLax・Strictに設定すると、サイトの動作に異変が起きてしまい、改修の必要性が出てしまうかも？なので、これまでの制作物は「SameSiteをNone」にして「Secureをtrue」にしておくのがラクです。

新たにサイトを作成する場合はSameSiteをLaxかStrictに設定して組んでいくのがよさそうです。

jquery.cookieは古いのでSameSiteの指定が非対応だと思われる。
今後はjavascriptによるクッキー操作は「js-cookie」にて行います。

＜js-cookieの使い方・設定＞

js-cookie【GitHub】

<script src="/js/js.cookie.js"></script>

//CDNでjs-cookie読み込み

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



//Cookieの保存

Cookies.set("name", "value");

Cookies.set("name", "value", {expires: 7, path: ""}); //{日数,適応させるパス指定}



//Cookieの保存＋セキュリティー指定

Cookies.set("name", "value", { secure: true });

Cookies.set("name", "value", { sameSite: "lax" }); //none,lax,ecure



//Cookieの取得

let getName = Cookies.get("name");



//Cookieの削除

Cookies.remove("name");

js-cookieの弱点として、配列格納の対応があいまいです。
古いバージョンの方は対応していて、新しい方は配列格納ができないとのこと。

対して、jquery.cookieは配列格納ができます。
SameSiteの指定ができるようになるまで非推奨ですが、使い方のメモとして残しておきます。

＜jquery.cookieの使い方・設定＞

jquery.cookie【GitHub】

<script src="/js/jquery.cookie.js"></script>

//CDNでjquery.cookie読み込み

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>



//Cookieの保存

$.cookie("name", "value");

$.cookie("name", "value", { expires: 7, path: "/" });//{日数,適応させるパス指定}



//Cookieの保存＋セキュリティー指定

$.cookie("name", "value", { secure: true });



//Cookieの取得

let getName = $.cookie("name");



//Cookieの削除

$.removeCookie("name");



//Cookieを配列で格納

$.cookie("array_name", {fruit: "apple", vegetable: "tomato"});

ちなみにjavascript・jqueryでクッキー保存をする際、１～２秒くらい保存に時間がかかります。
ですので、カートなどの場合はカゴに入れるボタンを押した直後に、２秒間だけ画面を暗転させてブラウザ操作をさせないようにしてます。

クッキー操作の際は、「ボタンを押したらローディング(くるくる回るスピナー)を表示する(ローディング画像不要CSSのみ)」の記事もご参考ください。