переписал всё. если не будет работать - напишите в начале функции
debugger, откройте консоль и перезагрузите страницу. дальше поэтапно смотрите, что делает скрипт, и где ошибка.
$(function () {
var post,
posts,
postIds,
prefix = "post_id_",
postsIds_key = "post_ids";
// ---------------------------
// выведет на страницу посты из массива постов (data, или posts)
// ---------------------------
function parsePosts (posts) {
$.each(posts, function (index, post) {
var html = '<article><header><h3>';
html += post.title + '</h3></header><section><p>';
html += post.body + '</p></section><footer>';
if (post.tags) {
html += '<div id="tags">';
if (!$.isArray(post.tags)) {
post.tags = post.tags || "";
post.tags = [post.tags];
}
$.each(post.ags, function (tagIndex, tag) {
html += '<span class="label">' + tag + '</span>';
});
html += '</div><div class="controls"><a class="btn btn-danger btn-mini remove" post_id="' + post.id + '">удалить</a></div>';
}
html += '</footer></article>';
$('#posts').append(html);
});
}
// ---------------------------
// получение списка постов
// ---------------------------
// получаем список идентификаторов постов из хранилища
postIds = localStorage.getItem(postsIds_key);
if (postIds) {
// есть в хранилище. обрабатываем и выводим на страницу.
postIds = JSON.stringify(postIds);
postIds = JSON.parse(postIds);
posts = $.map(postIds, function (postId) {
post = localStorage.getItem(prefix + postId);
post = JSON.parse(post);
return post;
});
parsePosts(posts);
} else {
// его нет в хранилище. делаем запрос ...
$.getJSON('json/posts.json', function (data) {
// и, когда данные придут, записываем посты в хранилище
postIds = $.map(data, function (post) {
var stringified = JSON.stringify(post);
localStorage.setItem(prefix + post.id, stringified);
return post.id;
});
// сохраняем идентификаторы постов в хранилище.
localStorage.setItem(postsIds_key, JSON.stringify(postIds));
// и выводим посты на страницу.
posts = data;
parsePosts(posts);
});
}
// ---------------------------
// делегируем клик по кнопке "удалить"
// ---------------------------
$("body").on("click", ".controls .remove[post_id]", function (e) {
var $this = $(e.target);
// красиво удаляем пост со страницы
$this.parents("article").slideUp("slow", function () {
$(this).remove();
});
// ID поста.
var id = $this.attr("post_id");
// удалим пост из хранилища
localStorage.removeItem(prefix + id);
// теперь удалим значение из списка идентификаторов
var index = postIds.indexOf(id);
postIds.splice(index, 1); // удалили
// теперь сохраним измененный список в хранилище.
localStorage.setItem(postsIds_key, postIds);
});
// ---------------------------
// делегируем клик по кнопке добавления поста
// ---------------------------
$("body").on("click", "button[type=submit]", function () {
var title = $('#zagol'),
body = $("#body"),
tags = $('#tags');
var post ={
title: title.val(),
body: body.val(),
tags: tags.val(),
id: postIds[postIds.length - 1] + 1
};
// добавляем идентификатор постов в список и сохраняем
postIds.push(post.id);
localStorage.setItem(postsIds_key, JSON.stringify(postIds));
// сохраняем новый пост в хранилище.
localStorage.setItem(prefix + post.id, JSON.stringify(post));
// выводим его на страницу
parsePosts( [post] ); // -> parsePosts принимает массив, поэтому [post]
// очищаем форму
title.add(body).add(tags).val("");
});
});