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

前置き

前回の続きです🙋‍♀️
【Nuxt.js】Nuxt文法編：cookie①ライブラリ不要の簡単読み書き

今回は特定のキーの取得や
cookieの削除、
JSONで取得などをやっていきます🌟

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

復習

id=123; data=123; のように
;で区切られた文字列だと、
キーと値のセットが
解析できないために
パーシングが必要でしたね💫☝️

splitで配列にすることで
キーと値のセットに分割できました。

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

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

キーと値、それぞれを取得する

cookieItemを
=で区切って配列にすれば
[0]がキーに、
[1]が値になります💡

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

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

まずはidと123を表示

ではsplitを使って
表示させてみます💡

まずは簡単に配列の0を指定
cookieItem[0]は画像でいう
"id=123"ですね。

let elem = cookieItem[0].split('=')
this.data = elem

1 2	let elem = cookieItem[0].split('=') this.data = elem

"id=123"を=で区切ったので
このようにキーと値が
別々に表示されます🙌

["id", "123"]

全てのcookieItemをキーと値で分割して表示

考え方の確認ができたので、
あとは全てのcookieItemで
分割させるだけですね！

全ての配列に同じ処理をしたいので
for文を使います💡

表示はこんな感じですね💡

this.data = elem

1	this.data = elem

ただしこれだと
{{ data }}に全ての配列が入らず
最後に追加したcookieが上書きされて
表示されます🍪💦
consoleでは全ての配列が確認できるので
処理自体は合っていて
表示の仕方を変えれば良いことが分かります💫

<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 = 'last=item'
    },
    getCookie () {
      let cookies = document.cookie
      let cookieItem = cookies.split(';')
      for (let i=0; i<cookieItem.length; i++) {
        let elem = cookieItem[i].split('=')
        console.log(elem)
        this.data = elem
      }
    },
  },
}
</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 = 'last=item'

getCookie () {

let cookies = document.cookie

let cookieItem = cookies.split(';')

for (let i=0; i<cookieItem.length; i++) {

let elem = cookieItem[i].split('=')

console.log(elem)

this.data = elem

}

</script>

</style>

上書きではなく、
全てを追加していきます✍️

this.data = this.data + elem + ' '

1	this.data = this.data + elem + ' '

cookieを削除する

有効期限に過去の日付を入れることで削除
cookieのパラメータExpires=<date>を使用します💡
Dateの書式はこちら
https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Date

パラメータ一覧、解説は前回の記事をご確認ください👀
【Nuxt.js】Nuxt文法編：cookie①ライブラリ不要の簡単読み書き

書き込みの時点で有効期限を指定

ということで基本は
buttonなどで
削除だけの処理するよりも
書き込みの時点で
有効期限を指定します💫☝️

saveCookie () {
  document.cookie = 'id=123; expires=Wed, 21 Oct 2015 07:28:00 GMT'
},

saveCookie () {

document.cookie = 'id=123; expires=Wed, 21 Oct 2015 07:28:00 GMT'

削除だけの処理

buttonをクリックして削除する場合も
式は同じですが、
予め登録してあったcookieの上書きをし、
有効期限を過去にするイメージです。

deleteCookie () {
  document.cookie = 'id=123; expires=Wed, 21 Oct 2015 07:28:00 GMT'
},

deleteCookie () {

document.cookie = 'id=123; expires=Wed, 21 Oct 2015 07:28:00 GMT'

cookieの登録が多すぎて🍪🍪🍪
確認しにくい場合は
一度ブラウザでcookieの削除をしてから
再度やってみてください💡
キャッシュと Cookie の消去

JSONにしてみる

データ形式の1つ

データ形式の1つです💡

JSONにするメリットは
こちらが参考になります✨👀
JSONとは？扱いやすく開発コスト・メンテナンスコスト削減が可能

cookieをJSON形式にして
扱いやすくしておき、
取得する時に
文字列に戻せば良いわけですね。

cookieをJSONにする

変換についてはこちらが参考になります。
JavaScriptでデータをJSONに変換したり戻したりする方法まとめ

saveCookie () {
    document.cookie = 'data=456'
    document.cookie = 'item=789'
    let json = JSON.stringify(document.cookie)
    console.log(json)
},

saveCookie () {

document.cookie = 'data=456'

document.cookie = 'item=789'

let json = JSON.stringify(document.cookie)

console.log(json)

consoleで表示させておきます。

JSONを戻す

パースで戻します💫

getCookie () {
    let json = JSON.stringify(document.cookie)
    let jsonCookie = JSON.parse(json)
    console.log(jsonCookie)
    this.data = this.data + jsonCookie + ''
},

getCookie () {

let json = JSON.stringify(document.cookie)

let jsonCookie = JSON.parse(json)

console.log(jsonCookie)

this.data = this.data + jsonCookie + ''

まとめ

簡単にですが、
おおまかなcookieの扱い方が
分かってきたかと思います🍪

今後は更に実用的なコードを
実践形式でやっていきます✨✊