ボタンを押したときにローカルストレージの内容をクリアしたい。

「input」と「textarea」の内容をローカルストレージで保存します。
そのとき、下記コード上において「クリア」ボタンを押してから、リロード時にクリア（実行）されます。これをボタンを押したときにクリア（実行）するようにしたいのですがどうすればよいでしょうか。

下記コードをもとに発火に関することで調べ試したのですがうまくいきませんでした。
どうかご教授くださいますようお願いいたします。

<p><input type="text"  placeholder="氏名" id="name" /></p>
<p><textarea type="text" placeholder="内容" id="output" ></textarea></p>
<p><input type="button" value="save" onclick="save();" /></p>
<p><input type="button" value="clear" onclick="clearData();" /></p>


<script>
function clearData() {
 window.localStorage.name = 'name';
 window.localStorage.output = 'output';
 localStorage.removeItem('name');   
 localStorage.removeItem('output');
}

function save() {
  var name = document.getElementById('name').value;
  var output = document.getElementById('output').value;
  window.localStorage.name = name;
  window.localStorage.output = output;
}

window.addEventListener('load',function(e) {
  if( window.localStorage.name ) {
    document.getElementById('name').value = window.localStorage.name; 
  }
  if( window.localStorage.output ) {
    document.getElementById('output').value = window.localStorage.output; 
  }     
});
</script>

行動規範の内容に同意します

回答1件

ベストアンサー

inputタグのvalue属性内に代入された値をclearボタンがクリックされたときに削除したいということでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11    </style>
12</head>
13<body>
14<p><input type="text" placeholder="氏名" id="name"/></p>
15<p><textarea type="text" placeholder="内容" id="output"></textarea></p>
16<p><input type="button" value="save" onclick="save();"/></p>
17<p><input type="button" value="clear" onclick="clearData();"/></p>
18
19
20<script>
21    function clearData() {
22        window.localStorage.name = 'name';
23        window.localStorage.output = 'output';
24        if ((document.getElementById('name').value) != "" || (document.getElementById('output').value) != "") {
25            document.getElementById('name').value = "";
26            document.getElementById('output').value = "";
27        }
28        localStorage.removeItem('name');
29        localStorage.removeItem('output');
30    }
31
32    function save() {
33        var name = document.getElementById('name').value;
34        var output = document.getElementById('output').value;
35        window.localStorage.name = name;
36        window.localStorage.output = output;
37    }
38
39    window.addEventListener('load', function (e) {
40        if (window.localStorage.name) {
41            document.getElementById('name').value = window.localStorage.name;
42        }
43        if (window.localStorage.output) {
44            document.getElementById('output').value = window.localStorage.output;
45        }
46    });
47</script>
48</body>
49</html>

投稿2017/02/20 09:29

s8_chu

総合スコア14731

suisuin

2017/02/20 10:39

回答ありがとうございます。ご質問について、value属性内に代入された値は、ボタンの名称？表示のみで実行の処理とは直接関係してません。ただ、初心者のためそれがより良いものだと理解しているわけではありません。あまり深いとこまで説明できず恐縮ですが、早速ためしたところボタンを押したときに保存された内容はクリアされました。ただ、ご質問の内容から、「value) != ""」　value属性内に代入された値があるなら、正しくはココ「" "」に入力が必要と思ったのですが、特にない場合はそのまま無記入で使用しても問題ないでしょうか。そもそも、私のその発想が違うようでしたら、そのものを訂正いただけたら幸いです。