なぜだろうcookie

#study_record

2022.01.09

javascriptでcookieの学習をudemyの「JavaScript(ES6)/Vue.js/TypeScript フロントエンド技術入門」で最近して、自分でやってみようと思いやってみたのだが、なぜかうまく動かないということがあったのでまとめてみようと思う。

見た目の設定

まずhtmlは以下のようで非常に簡単にメールアドレスと電話番号の記載欄と保存ボタンをただ並べただけだ。

                <div>
                    <p>メールアドレス　
                        <input type="text" id="email" name="email">
                    </p>
                    <p>電話番号
                        <input type="text" id="number" name="number">
                    </p>
                </div>
            <button id="save">保存する</button>

Cookieに保存

そこにjavascriptでまず、cookieにこれらを保存するため以下のように記載する。

document.getElementById('save').addEventListener('click', function () {
 //encodeURIComponetで囲う事でcookieに保存できる形式になる
//id=numberの値を取得
 let number = encodeURIComponent(document.getElementById('number').value);
//id=emailの値を取得
 let email = encodeURIComponent(document.getElementById('email').value);
//cookieに保存　//有効期限3600秒(一時間)と指定
document.cookie = 'number=' + number + '; max-age=3600';
document.cookie = 'email=' + email + '; max-age =3600';
 })

Cookieで得た値を取得

続いてcookieに保存した値を取得するための関数を作成する。

 const getCookie = (key) => {
　　　　　 //cookieの値を;で分割
                    let cookies = document.cookie.split(';');
                    //cookiesで以下を実行
                    for (let i = 0; i < cookies.length; i++) {
                     //kの値を=で分割
                        let k = cookies[i].split('=');
                        if (key === k[0]) {
                      //encodeURIComponetで保存した形からもとに戻すためにdecodeURIComponentで囲う
                            return decodeURIComponent(k[1]);
                        }
                    }
　　　　　//もし値がない場合は空白
                    return '';
                }

なぜか反映されないnumber

メールアドレスと電話番号の記述欄にcookieに保存した内容を反映させるため以下の内容を記載

document.getElementById('email').value = getCookie('email');
document.getElementById('number').value = getCookie('number');

しかし何故かemaiは保存されるが、numberが保存されない。

spaceを入れることで解決

なぜだろうと試行錯誤しnumberの前にspaceを入れることで動かすことができた。

document.getElementById('email').value = getCookie('email');
document.getElementById('number').value = getCookie(' number');

なぜだか2番目に記載させて物には空白が必要らしい。なぜだろうcookie。

学んだこと、日常