やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

📌 ？
トップ > JavaScript > JSでCookieを扱うライブラリjs-cookieを使ってみた

JSでCookieを扱うライブラリjs-cookieを使ってみた

JavaScript Library

　とても簡単だった。

成果物

js-cookie

要点

index.html

<script src='https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.1/js.cookie.min.js'></script>
<script src='main.js'></script>

main.js

const KEY='K';
const VALUE='V';
Cookies.get();
Cookies.get(KEY);
Cookies.set(KEY, VALUE);
Cookies.set(KEY, VALUE, {expires: 7, path: ''});
Cookies.remove(KEY);

Cookieとはブラウザがサイトごとにデータを保存する仕組みである。 　Cookieってなんだっけ？　という人に向けて説明しよう。Cookieとはブラウザがサイトごとにデータを保存する仕組みである。

　特徴は２つ。サイトごとに保存すること。保存期間が過ぎたら削除されること。

　Cookieはドメイン単位でデータを保存する。たとえばhttp://domain.jpならdomain.jpというドメイン単位で保存する。ドメインが存在しないローカルfile://...で実行しても、データ保存されない。

　Cookieには保存期間を指定できる。その保存期間が過ぎたら自動的に削除される。これにて閲覧しなくなったサイトのデータから削除されていく。永久に増大してファイル容量が圧迫されるような事態を防ぐ狙いがある。

Cookies.get()

　ドメインのCookieをすべて取得する。

const cookies = Cookies.get();
for (const key in cookies) {
    this.#logging(`${key}=${cookies[key]}`);
}

　オブジェクト形式で取得できる。{key: value, key: value, ...}

Cookies.set('K1', 'V1');
Cookies.set('K2', 'V2');
var c = Cookies.get(); // {K1:'V1', K2:'V2'}

Cookies.get(KEY)

　指定したキーの値を取得する。

let v = Cookies.get(KEY);

　指定したキーが存在しないときはundefinedが返される。

Cookies.set(KEY, VALUE)

　指定したキーに値を設定する。

Cookies.set(KEY, VALUE);

　第三引数にオプションを与えることができる。

Cookies.set(KEY, VALUE, {expires: 7, path: ''});
options 値の型 概要
expires int このCookie値を指定した数値の日数だけ保存する。超過後は自動で削除する。
path string このCookie値をここで指定したパスでのみ有効になる。

Cookies.remove(KEY)

　指定したキーを削除する。

Cookies.remove(KEY);

所感

GitHub Pagesで動作確認した。 　Cookieはドメイン単位で保存する仕組みである。そのためローカルファイルをブラウザで開いても保存されない。そこで、GitHub Pagesにアップロードして動作確認した。
ローカルサーバで動作確認した。 　Cookieはドメイン単位で保存する仕組みである。そのためローカルファイルをブラウザで開いても保存されない。そこで、ローカルサーバを立ち上げて動作確認した。

  1. ターミナルを起動する
    1. カレントディレクトリを移動する。index.htmlがあるパスへ。cd リポジトリ/src/1
    2. python3 -m http.server 8000
  2. ブラウザを起動する
    1. http://0.0.0.0:8000/ をURL欄に入力する
  3. ターミナルでCtrl+Zして終了する

対象環境

$ uname -a
Linux raspberrypi 5.4.72-v7l+ #1356 SMP Thu Oct 22 13:57:51 BST 2020 armv7l GNU/Linux