Vueと共通

【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=値を代入します。

エンコード

クッキーの名前や値にはセミコロン(;)、カンマ(,)、空白を含めてはいけません。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の後ろに
セミコロン; で区切って追加します✍️


参照


書き込み&参照

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

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

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

パラメータ

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

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


サンプルコード

全てのcookieを取り出す

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

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


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

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

パーシング処理とは

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

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

配列に変換する

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

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

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

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

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

MDN: split()

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

更に区切る

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

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


まとめ

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

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

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

-Vueと共通
-,

© 2021 aLiz Nuxt