【 javascript 】 Cookie.js 使ってみる

今回「一度目だけ表示され、リロードしても表示されないようにする」
仕様のためにクッキーをjsで操作しました。

そこでcookie.jsなるものを使ったところ、
めちゃくちゃ直感的で簡単だったのでコードメモを残します。

cookie.jsとは

cookie.jsは、ブラウザにクッキーを持たせることや
クッキーを取得することが容易に行えるライブラリです。

仕様方法はこれだけです

Cookies.set('foo', 'bar')

これで、プロパティが'foo'で値が'bar'のクッキーが読み込むページに追加されます。

ブラウザでのクッキー確認方法

以下の通りです。

1 . ブラウザのディベロンパーツールを開く
2 . Applicationをクリック
3 . Cookiesという項目をクリック

ディベロッパーツールのElements.....のリストの左側にある
Applicationをクリックします。
f:id:okinawanpizza:20200327001349p:plain 　　
その中にCookiesという項目があるのでクリック

f:id:okinawanpizza:20200327001927p:plain その中にあるURLをクリック、すると追加されたクッキーの一覧が表示されます。

f:id:okinawanpizza:20200327002101p:plain

ちなみに、クッキーをクリックしてdeleteボタンを押すと
選択されたクッキーを消去することができます。

cookie.js使い道

クッキーがあるかないかを判別して
初回だけ実行するようにします。

まずCDNを設定します。

https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.1/js.cookie.min.js

これでcookie.jsの関数が使えるようになりました！！
そしてjsを開いて次の関数を書きましょう！

function checkCookie() {
  if(Cookies.get('hoo')){
    //console.log("クッキーがあるので実行しません")
  }else{
    Cookies.set('hoo', "bar")
    //console.log("クッキーないのでクッキーをセットします。"
  }
}

window.onload = checkCookie;

クッキーの有無を判別する関数を書きました。