勉強したことのメモ

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

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

  JavaScript

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

 

js-cookie

GitHub

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

CDN

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.5/dist/js.cookie.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.5/dist/js.cookie.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.5/dist/js.cookie.min.js"></script>

 

利用方法

基本的な使い方

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
//取得
Cookies.get('name');
//保存
Cookies.set('name', 'value');
//削除
Cookies.remove('name');
//取得 Cookies.get('name'); //保存 Cookies.set('name', 'value'); //削除 Cookies.remove('name');
//取得
Cookies.get('name');

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

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

保存期間指定

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
//日数で指定
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);
//日数で指定 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);
//日数で指定
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属性設定

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const option = { secure: true };
Cookies.set('name', 'value', option);
const option = { secure: true }; Cookies.set('name', 'value', option);
const option = { secure: true };
Cookies.set('name', 'value', option);

 - JavaScript

  関連記事

ブラウザ開発者ツールの起動を検出しソースコード変更やリダイレクト設定できる「console-ban」ライブラリの利用方法

他サイトのソースコードを拝見するため開発者ツールを開こうとすると、偶に「デバッガ ...

JavaScriptの「Day.js」ライブラリで日付の比較を行う方法

JavaScriptの日時・時刻用ライブラリ「Day.js」を用いて日付の比較を ...

画像にマウスを合わせると拡大表示させる「drift」ライブラリの利用方法

amazon等ECサイトで商品画像にマウスを合わせると当該部分が拡大表示されると ...

JavaScriptにてテキストボックスにサジェスト機能を実装できる「autoComplete.js」の利用方法

以前にjQuery UIでテキストボックスにサジェスト(入力補助)機能を実装する ...

JavaScriptのライブラリ「crypto-js」を使用して暗号化・復号化・ハッシュ化する方法

JavaScriptにてCookie等にデータを保存する際に暗号化したものを保存 ...

S