【Nuxt.js】Nuxt文法編：cookie①ライブラリ不要の簡単読み書き

前置き

Cookie（クッキー）とは、ホームページを訪問したユーザーの情報を一時的の保存する仕組みです。
サイトを訪れた日時、訪問回数など、様々な内容がユーザー情報として保存されることによって、サイトを再訪問したときにユーザーを特定し、情報を入力する手間が省けます。
https://qiita.com/mocha_xx/items/e0897e9f251da042af59

ライブラリを使わなくても
簡単に読み書きできます📚

もちろん使っても良いのですが
基礎知識を理解する上では
初めは使わない方がオススメです❤️👩‍🏫

⬇️こちらもぜひ参考にしてみてください✨
保存の種類と段階について

MDN: https://developer.mozilla.org/ja/docs/Web/API/Document/cookie

参考:
JavaScriptでcookie処理（読み・書き・削除）
Cookieの情報を【取得/保存/削除】する
 Cookieに書きこまれたデータを読み込む - JavaScript プログラミング
 【JavaScript】ライブラリを使わずにCookieを読み書きする

基礎コード

書き込み

document.cookieに
key=値を代入します。

document.cookie = 'id=123'

1	document.cookie = 'id=123'

エンコード

クッキーの名前や値にはセミコロン(;)、カンマ(,)、空白を含めてはいけません。encodeURIComponent()を使用しましょう。
https://qiita.com/takanorip/items/4e23b803bb1393176636

エンコード

機械が読めるように
半角英数字や記号に変換すること🤖

URLには日本語が使えないため
URLエンコードを使って変換します。
逆に戻す場合がデコードです。
https://tech-unlimited.com/urlencode.html

今回のパターンは
cookieにセミコロンなどが使えないので
エンコードするために
encodeURIComponent()を使用するわけです💫☝️

パラメータ

クッキーを書き込む際にいくつかの属性を設定することができます。

path
クッキーが有効なパス
domain
クッキーが有効なドメイン
max-age
クッキーの有効期限 (秒数で指定/設定しないとブラウザ終了時に削除)
expires
クッキーの有効期限 (日付で指定/設定しないとブラウザ終了時に削除)
secure
セキュリティの設定
https://qiita.com/takanorip/items/4e23b803bb1393176636

パラメーターはkey=valueの後ろに
セミコロン; で区切って追加します✍️

document.cookie = 'id=123; path=/'

1	document.cookie = 'id=123; path=/'

参照

console.log(document.cookie)

1	console.log(document.cookie)

書き込み&参照

<template>
  <div class="page">
  </div>
</template>

<script>
export default {
  created() {
    document.cookie = 'id=123'
    console.log(document.cookie)
  },
}
</script>

<style lang="scss" scoped>
</style>

</div>

</template>

export default {

created() {

document.cookie = 'id=123'

console.log(document.cookie)

}

</script>

</style>

検証で確認してみましょう🔍👀
検証 > Application > Storage内Cookies🍪

consoleにも
もちろんid=123が表示されます💡

書き込みが既にできているので
設定したこちらのコードを消しても
cookieとconsoleは
同じ表示になります💫

document.cookie = 'id=123'

1	document.cookie = 'id=123'

パラメータ

pathを指定しない場合は
どのページでも保存、取り出しが可能です。

sampleページで指定した場合
sample.vueでしか保存、取り出しができません。

document.cookie = 'id=123; path=/sample'

1	document.cookie = 'id=123; path=/sample'

サンプルコード

全てのcookieを取り出す

書き込んだcookieを
全て取り出して
テンプレートで表示させています。

キーと値を変えて
いくつか保存し
表示させてみましょう🍪🍪🍪

<template>
  <div class="page">
    <button
      @click="saveCookie"
    >
      save
    </button>
    <button
      @click="getCookie"
    >
      get
    </button>
    <p>{{ data }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      data: '',
    }
  },
  methods: {
    saveCookie () {
      document.cookie = 'id=123'
    },
    getCookie () {
      this.data = document.cookie
    },
  },
}
</script>

<style lang="scss" scoped>
</style>

<button

@click="saveCookie"

save

</button>

<button

@click="getCookie"

get

</button>

</div>

</template>

export default {

data () {

return {

data: '',

}

methods: {

saveCookie () {

document.cookie = 'id=123'

getCookie () {

this.data = document.cookie

}

</script>

</style>

特定のキーのみを取り出す

特定のキーのみを取り出したい場合は
パーシング処理が必要です💫☝️

パーシング処理とは

parseは「文法・構文を解剖する」
という意味で
HTMLをパースした場合は
「これが見出しで
　こっちが本文…
　これは画像だな…」
と解析、分類してくれるものです💡

今回でいうなら
「このキーと対応する値はこれ…」
みたいなイメージですね🧸💭

配列に変換する

今の段階では セミコロン; で
区切られた文字列になっているので
キーと値のセットが
解析できないわけです🌀

配列にすることで
それを認識させてあげましょう🌟

まずは全てのキーと値を配列にする

ただの文字列の並びを
split()を使って
配列に変換します。

配列[]内 で各keyと値のセットが
カンマ, で区切られました🙌

MDN: split()

<template>
  <div class="page">
    <button
      @click="saveCookie"
    >
      save
    </button>
    <button
      @click="getCookie"
    >
      get
    </button>
    <p>{{ data }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      data: '',
    }
  },
  methods: {
    saveCookie () {
      document.cookie = 'id=123'
    },
    getCookie () {
      let cookies = document.cookie
      let cookieItem = cookies.split(';')
      this.data = cookieItem
    },
  },
}
</script>

<style lang="scss" scoped>
</style>

<button

@click="saveCookie"

save

</button>

<button

@click="getCookie"

get

</button>

</div>

</template>

export default {

data () {

return {

data: '',

}

methods: {

saveCookie () {

document.cookie = 'id=123'

getCookie () {

let cookies = document.cookie

let cookieItem = cookies.split(';')

this.data = cookieItem

}

</script>

</style>

あとは取り出したい配列番号にするだけです💫

this.data = cookieItem[0]

1	this.data = cookieItem[0]

更に区切る

現場はここまでの区切りです。

cookieItem[0] = "(キー1)=(値1)"

1	cookieItem[0] = "(キー1)=(値1)"

これができると更に良いですね🌟
こちらは次回やります♪

elem[0] = "(キー1)"
elem[1] = "(値1)"

1 2	elem[0] = "(キー1)" elem[1] = "(値1)"

まとめ

Vuexに慣れてきたので
次のステップとして
cookieをやってみました🍪

今回は簡単な書き込みと取得ですが
firebaseAuthのユーザー情報の
保存などを別記事で書きたいです✍️🤔💭

次回は削除やJSONに変換して
取り出す方法などをやっていきます🙋‍♀️