KumaTechLab
2021-10-24/2023-05-23

javascriptでのCookieの取り扱いとライブラリ

javascriptでのCookieの取り扱いとライブラリ

javascriptでcookieの取り扱いについて紹介していきます。

ユーザー登録しないサイトで「お気に入り」「いいね」など実装する場合は有効です。

Cookieの取得方法

cookieの取得は非常に簡単です。

ただし、取得される形式は文字列になるので、指定したキーの値を取得する方法も紹介していきます。

// Cookieの取得
const cookie = document.cookie;
// console.log( cookie );
// key1=value1; key2=value2;

指定したキーの値を取得

const getCookie = keyName => {
    if ( document.cookie ) {
        const cookieSet = document.cookie.split( '; ' ).find( ( row ) => row.startsWith( keyName ) );
        if ( cookieSet ) {
            const cookieValue = decodeURIComponent( cookieSet.split( '=' )[1] );
            return cookieValue;
        }
    }


    return '';
}

文字列状態のCookieを「; 」で区切った配列から指定したキー名で始まるものを取得しています。

その取得したCookieのセットを「=」で区切って、後ろ側を取ってあげればそれが値となります。

各関数の使い方は以下を参考にしてください。

split

find

startsWith

decodeURIComponent

Cookieのセット

cookieはセットも簡単に行えます。

ただし、先述の通り取得は文字列なので、既存キーの値を利用して書き換えたりする場合には少し記述が長くなります。

// Cookieのセット
document.cookie = 'key=value';
// console.log( document.cookie );
// 'key=value'

指定キーにcookieをセット

// クッキーをセット
const setCookie = keyName => {
    let nowValue = getCookie( keyName );


    // 取得した値を元に新しい値を生成
    const newValue = 'test2';
    
    // 標準時の場合
    const date = new Date();
    date.setMonth( date.getMonth() + 1 );
    const expires = date.toUTCString();


    document.cookie = `${ keyName }=${ newValue }; expires=${ expires }`;
}

expiresを設定しない場合はセッションになります。実質無期限のような日付を設定することも可能ですが、特に理由がないなら適当な日付を設定しましょう。

Cookieのライブラリ

上で紹介しましたが、文字列形式な為思いのほか扱うのが面倒臭いと思った人もいるでしょう。

そこで、Cookieの取り扱いを楽にするライブラリを紹介します。

想定しているような一文でポンッと取得できます。

使用するライブラリは「js-cookie」というものです。

オープンソースでMIT LICENSEですので、プロジェクトにも組み込みやすいです。

js-cookie(hithub)

jsファイル

npm i js-cookie
// jsファイルよりダウンロードして使用する場合
<script type="module" src="/path/to/js.cookie.mjs"></script>
<script nomodule defer src="/path/to/js.cookie.js"></script>
// CDN利用の場合
// https://www.jsdelivr.com/package/npm/js-cookie
<script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.1/dist/js.cookie.min.js"></script>

使用方法は簡単なのでコードで見てください。

import Cookies from 'js-cookie';


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


// セット
Cookies.set( 'key', 'value' );


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


// 期限設定
Cookies.set( 'key', 'value', { expires: 365 } ); // 1年
Cookies.set( 'key', 'value', { expires: 3 } ); // 3日
Cookies.set( 'key', 'value', { expires: 1 / 48 } ); // 30分

見ての通り非常に簡単ですね。

expiresは「日数」がデフォルトになっていますので注意してください。「Date」オブジェクトもサポートしていますので、しっかりとした期限を設定したい場合にはそちらを利用すると良いです。

その他「path」「domain」も設定が可能です。

まとめ

以上、javascriptでのcookieを取り扱い方まとめでした。

cookieはサーバーサイドでも取り扱いが行いやすいため、選択しがちです。しかし、欧州では個人情報に当たるなど規制も厳しいので、使用する場合はGDPRに則っての同意を求めるポップアップなども併せて利用しましょう。

サーバーサイドと連携しないのであれば「localstrage」の使用も検討すると良いと思います。

2020 KumaTechLab.