フロントエンドブログ

Web制作で役立つフロントエンドの知識を発信しています!

【JavaScript】Cookieを使ってメールアドレスを保存しよう

皆さんこんばんは(^o^)

今日は夏を彷彿させる暑さでしたね・ω・

体調を崩しやすい季節なので体調管理には気をつけていきましょう。

 

今日はお問い合わせフォームなどでよく使われているCookieえを保存する方法を

ご紹介します。

 

先ずはindex.htmを用意します。

index.html

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>cookie</title>

<link rel="stylesheet" href="../assets/style.css">
</head>

<body>

<div>
<input type="text" id="email" name="email">
</div>
<button id="save">保存</button>

<script>
const getCookie=(key)=>{
let cookies =document.cookie.split(';');
console.log(cookies)
for(let i = 0 ;i < cookies.length;i++){
let k = cookies[i].split('=');
if(k[0] === key){
return decodeURIComponent(k[1]);
}
}
return ""
}
document.getElementById('save').addEventListener
('click',function(){
let email = encodeURIComponent(document.getElementById
('email').value);
document.cookie='email=' + email +';max-age=3600';
document.cookie ='number=123; max-age=3600;';
})


document.getElementById('email').value = getCookie('email');
</script>

</body>

</html>

上記が完成版のコードです。一つずつ見ていきましょう。

document.getElementById('save').addEventListener
('click',function(){
let email = encodeURIComponent(document.getElementById
('email').value);
document.cookie='email=' + email +';max-age=3600';
document.cookie ='number=123; max-age=3600;';
})

まずここで何をしているかというと保存ボタンの要素を取得しています。

そして保存ボタンの要素に対してクリックイベントを設定します。

 

次に変数emailにinput要素に入力された値を格納します。

ここでeccodeURIComponentメソッドを使ってデータを別の形式にエンコード(変換)します。

次にdocument.cookieを用いてメールアドレス情報を’email'をkeyにして保存します。

chromeでしたら検証のアプリケーションメニューにあるcookieより確認することができます。ちなみにmax-age=3600とは決り文句のコードで1時間保持することを示しています。数字を変えれば秒数分の時間保持されます。

楽天ブックス

const getCookie=(key)=>{
let cookies =document.cookie.split(';');
console.log(cookies)
for(let i = 0 ;i < cookies.length;i++){
let k = cookies[i].split('=');
if(k[0] === key){
return decodeURIComponent(k[1]);
}
}
return ""
}

次にこの部分ですが関数を定義しメールアドレスをreturnする仕組みとなります。

現時点ではcookieは2種類保存されていています。

楽天ブックス

document.cookie='email=' + email +';max-age=3600';
document.cookie ='number=123; max-age=3600;';

入力したメールアドレスとダミーの値です。

let cookies =document.cookie.split(';');ですが2つのcookieが;のあとに連結されているのでsplitを用いて分割します。

そしてcookieoの数だけfor文を用いてまわし配列を操作します。

配列の変数kを定義しそれぞれのcookieを=を軸にsplitで分割します。

そして値がemail出会ったらemailの値をリターンするプログラムとなり一度入力されたメールアドレスが保存される仕組みが完成です。

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

サイドに関数を実行しinput要素に出力します。これでまた一つ使いやすいサイトができます。皆さんも是非、コードを書いてみてください\(^o^)/

 

継続は力なり