tamakipedia

鎌倉でフロントエンドエンジニアをしています。Wordpress/Javascript/JQuery が得意で、現在React勉強中です!

【 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;

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

Cookies.get("hoo")

hooというクッキーを取得する関数ですが、if文では条件式になります。
hooがあればtrueを返します。

Cookies.set("hoo","bar")

こちらが、クッキーを設定してくれる関数になります。めちゃくちゃわかりやすい文ですね!

これで、hooがあれば関数を実行し
なかればhooをセットするといった関数の出来上がりです。
終わったらディベロッパーツールなどで確認しましょう!おしまい!