新しい値を localStorage に保存する前に、重複をチェックする必要があります。
これは、それ以外に必要なすべてを実行する実用的なフィドルです。
私が改善するのに役立つ他の方法を提案してください。まだ学習中です。
フィドルにあるコードの一部を次に示します。
("button#save").click(function () {
var id = $("#id").val();
if (id != "") {
var text = 'http://' + id + '.tumblr.com';
} else {
alert('empty');
return false
}
// UPDATE
var result = JSON.parse(localStorage.getItem("blog"));
if (result == null) result = [];
result.push({
id: id,
tumblr: text
});
// SAVE
localStorage.setItem("blog", JSON.stringify(result));
// APPEND
$("#faves").append('<div class="blog"><button class="del" id=' + id + '>x</button><a target="_blank" href=' + text + '>' + imgstem + id + imgstemclose + '</a></div>');
});
// INIT
var blog = JSON.parse(localStorage.getItem("blog"));
var stem = 'http://'
var stemclose = '.tumblr.com';
var imgstem = '<img src="http://api.tumblr.com/v2/blog/'
var imgstemclose = '.tumblr.com/avatar/48"/>'
//console.log(blog[0].id);
if (blog != null) {
for (var i = 0; i < blog.length; i++) {
var item = blog[i];
var text = 'http://' + item.id + '.tumblr.com';
$("#faves").append('<div class="blog"><button class="del" id=' + item.id + '>x</button><a href=' + text + '>' + imgstem + item.id + imgstemclose + '</a></div>');
}
}
$('#faves').on('click', 'button.del', function (e) {
var id = $(e.target).attr('id');
// UPDATE
var blog = JSON.parse(localStorage.getItem("blog"));
var blog = blog.filter(function (item) {
return item.id !== id;
});
// SAVE
localStorage.setItem("blog", JSON.stringify(blog));
// REMOVE
$(e.target).parent().remove();
});