勉強したことのメモ

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

  関連記事

バニラJS対応(jQuery非依存)の画像遅延読み込みライブラリ「lazysizes」の利用方法

あるサイトのコーディングデータを貰った際に「lazysizes」というJavaS ...

JavaScriptでランダムなカラーコードを生成する「RandomColor」ライブラリの利用方法

先日PHPでランダムなカラーコードを生成する「RandomColor.php」ラ ...

バニラJavaScriptでリッチなセレクトメニュー(プルダウン)を実装できる「Tom Select」の利用方法

先日バニラJavaScriptでリッチなセレクトメニュー(プルダウン)を実装でき ...

JavaScriptでWebカメラやスマホカメラを利用してQRコードを読み取りURLを返す方法

JavaScriptのjsQRというライブラリで簡単にWebページ版QRコードリ ...

JavaScriptでデータをGzip等で圧縮できる「pako」ライブラリの利用方法

以前「zcookies」というライブラリの利用方法をメモしたが、当該ライブラリの ...