Vueと共通

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

前置き

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

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


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

復習

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

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


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

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

まずはidと123を表示

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

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

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

["id", "123"]

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

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

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

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

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

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


cookieを削除する

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

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


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

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


削除だけの処理

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

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


JSONにしてみる

データ形式の1つ

データ形式の1つです💡

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

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


cookieをJSONにする

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

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


JSONを戻す

パースで戻します💫


まとめ

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

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

-Vueと共通
-,

© 2021 aLiz Nuxt