###前提・実現したいこと
現在、メモ帳を作成しているところです。
考えている仕様としては、タイトル・内容をlocalstorageに保存できるものを作成したいと考えています。
入力したメモを画面に表示させ、表示させたものを選択したら画面・localstorageからも削除したいと考えています。
###該当のソースコード
HTML
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <title>MeMo Pad</title> 6 <link rel="stylesheet" href="style.css"> 7 <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css"> 8 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 9 <script src="memo.js"></script> 10 </head> 11 <body> 12 <div class="wapper1"> 13 <textarea rows="8" cols="80" value="" id="title"></textarea> 14 </div> 15 <div class="wapper2"> 16 <textarea rows="8" cols="80" value="" id="textarea"></textarea> 17 </div> 18 <button id="save">Save</button> 19 <button id="clear">Clear</button> 20 <div class="memoarea"> 21 22 </div> 23 24 </body> 25</html> 26
javascript
1var i = 0; 2var storage = localStorage; 3 4$(function(){ 5//保存の処理 6 $("#save").on("click",function(){ 7 var title = $("#title").val(); 8 var value = $("#textarea").val(); 9 if(title && value){ 10 localStorage.setItem(title,value); 11 } else if (title == "" || value == "") { 12 alert("入力してください"); 13 return; 14 } 15 alert("Saveしました!"); 16 $("#textarea").val(""); 17 $("#title").val(""); 18 19 //要素の追加 20 for (; i < storage.length; i++) { 21 var _key = storage.key(i); 22 var content = storage.getItem(_key); 23 var memo_area =$("<div></div>", { 24 width: 300, 25 height: 100, 26 css: {border: "5px solid gray",hover:"border3 #000 solid"}, 27 id: "my-div"+i, 28 }); 29 var memo_title =$("<h1></h1>",{ 30 width: 300, 31 height:10, 32 css:{backgroundColor:"black"}, 33 class:"memo_title"+i, 34 text:_key, 35 }) 36 var memo_content =$("<p></p>",{ 37 width: 300, 38 height:90, 39 css:{backgroundColor:"white"}, 40 class:"memo_content"+i, 41 text:content, 42 }) 43 44 $(".memoarea").append(memo_area); 45 $("#my-div"+i).append(memo_title); 46 $("#my-div"+i).append(memo_content); 47 48 49 //マウスが乗った時の表示 50 $(".memoarea").on({ 51 "mouseenter": function(){$(this).css('background', 'red',"cursor","pointer"); 52 }, 53 "mouseleave": function(){$(this).css('background', '',"cursor","");} 54 }, "#my-div"+i); 55 56 //削除の処理 57 $("#my-div"+i).on("click",function(){ 58 var h = $(".memo_title"+i).text(); 59 var p = $(".memo_content"+i).text(); 60 if (h == memo_title && p == memo_content) { 61 localStorage.removeItem(memo_title); 62 localStorage.removeItem(_key); 63 $(this).remove(); 64 alert("削除しました!"); 65 $("#textarea").val(""); 66 } 67 68 }); 69 }; 70 71 }); 72}); 73
###補足情報(言語/FW/ツール等のバージョンなど)
現在できていること
・入力したメモを画面に表示させることはできています。
・削除はできますが、入力→入力→削除→入力といったように何度か繰り返すと、削除したメモの内容が表示されるなどといったことが起きてしまいます。
実現したいこと
・画面に表示させたメモの内容を、同じ内容をlocalstorageから削除させたい。
・リロードを行った後でも、localstorageに保存されているものを画面に表示させたい
初心者なのでコードがめちゃくちゃだと思いますが、どうぞよろしくお願いいたします。
回答3件
あなたの回答
tips
プレビュー