勉強したことのメモ

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

JavaScriptでCookieを取り扱う「js-cookie」ライブラリの利用方法

  JavaScript

「jquery-cookie」プラグイン開発終了に伴い「js-cookie」ライブラリを利用するようになった。以前に簡単な使い方に関しては書いたものの、詳細をまとめていなかったのでそのあたりを以下にメモ。また、先日触れたSecure属性の設定方法もあわせてメモ。

 

js-cookie

GitHub

https://github.com/js-cookie/js-cookie

CDN

CDNで使う場合は以下を記述する。

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

 

利用方法

基本的な使い方

//取得
Cookies.get('name');

//保存
Cookies.set('name', 'value');

//削除
Cookies.remove('name');

保存期間指定

//日数で指定
const option = { expires: 1 }; //1日
Cookies.set('name', 'value', option);

//秒数で指定
const expires = new Date();
expires.setTime( expires.getTime() + ( 1000 * 60 * 60 * 24 )); //1000ミリ秒 * 60秒 * 60分 * 24時間 = 1日
const option = { expires: expires };
Cookies.set('name', 'value', option);

Secure属性設定

const option = { secure: true };
Cookies.set('name', 'value', option);

 - JavaScript

  関連記事

バニラJavaScript対応の日時ピッカー「Flatpickr」ライブラリの利用方法

サイト内に日時ピッカーを実装する場合、jQueryの「DateTimePicke ...

JavaScriptにて「QRCode.js」ライブラリを利用してQRコードを生成する方法

PHPが使えない環境で動的にQRコードを生成したかった。以前にメモしたAPI等の ...

JavaScriptにて電子書籍や漫画ビューア用のライブラリ「ToraViewer」の利用方法

電子書籍や漫画ビューア用を設置したい。条件としてはレスポンシブ対応していること。 ...

JavaScriptで小数の計算をする際にずれ(誤差)を無くす方法(decimal.js)

JavaScriptで小数の計算をすると値がずれる(誤差が発生する)ことがあった ...

JavaScriptの「Flatpickr」ライブラリで時分のみ表示する方法

バニラJavaScript対応の日時ピッカー「Flatpickr」ライブラリでカ ...