勉強したことのメモ

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でtableタグをエクセルファイル(xlsx)としてダウンロードさせる方法

table内のデータを何らかのファイルでダウンロードさせたい。通常PHPでCSV ...

JavaScriptでオブジェクトをzlib圧縮してCookieに保存できる「zcookies」ライブラリの利用方法

あるシステムでCookieを保存している部分があった。ただ、日本語を保存している ...

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

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

JavaScriptのリッチなalert / confirmぽいウィンドウを表示する「sweetalert2」の利用方法

JavaScriptのalert / confirmはブラウザによって表示位置や ...

jQuery UIでカレンダーピッカー(Datepicker)の利用方法

フォーム等で日付を入力する際にカレンダーピッカー機能を実装することがある。その際 ...