【JavaScript】ローカルストレージを使ってメールアドレスを保存しよう

こんばんは(^o^)今日は蒸し暑かったですね。

前回のクッキー保存に引き続き今日はローカルストレージに保存する方法をご紹介します。ローカルストレージはHTML5から対応しています。

それではindex.htmlを用意します。

index.html

<!DOCTYPE html>
<html>

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

<body>
 <div>
 <input type="text" id="email" name="email">
 </div>
 <button id="save">メールアドレスを保存する</button>
 
 <script>
 document.getElementById('save')
.addEventListener('click',()=>{
 localStorage.setItem('email',document.getElementById
('email').value);
 })
 document.getElementById('email').value =localStorage.getItem
('email')
 </script>
</body>

</html>

まずHTMLはテキスト入力フィールドとボタンを用意します。

楽天ブックス

 <div>
 <input type="text" id="email" name="email">
 </div>
 <button id="save">メールアドレスを保存する</button>

続いてJavaScriptです。

 <script>
 document.getElementById('save').addEventListener
('click',()=>{
 localStorage.setItem('email',document.getElementById
('email').value);
 })
 document.getElementById('email').value =localStorage.getItem
('email')
 </script>