Вывод JSON Объекта из localStorage

[melky]

в коде, где достаем записи из хранилища :

} else { /* нет сохранённых ID'шников */ }

вот сюда и вписывайте получение JSON и заполнение хранилища

Выходит Записывать в хранилище надо как-то вот так?:

нет - в переменной post будет просто текст, а там должен быть объект.

что-то вроде такого :

var post = {
    title: $("#zagol").val(), 
    body: $("#body").val(),
    .....
}

и да, только получение текста ( bla bla.val() + bla.val() ) нужно делать в обработчике клика, иначе пустые значения будут.

Хотя как же тогда брать пост id...

пущай ID нового поста будет ID последнего поста, увеличенного на 1.

post.id = postIds ? postIds[postIds - 1] + 1 : 0;

[Философ]

post.id = postIds ? postIds[postIds - 1] + 1 : 0;

Хм..сейчас попробую... можете описать подробнее эту строку, которую я процитировал. Хочется все таки разобраться полностью в коде, дабы в понять его и в дальнейшем уже самому знать как это делать.

[Философ]

Попробовал..но теперь посты вообще не выводятся. Да и хранилище почему то опустело. Код изменил вот так:

// JavaScript Document
$(document).ready(function(){
		var post, postIds, prefix = "post_id_", postsIds_key = "post_ids";

		postIds = $.map(data, function (post) {
		    var stringified = JSON.stringify(post);
		    localStorage.setItem(prefix + post.id, stringified);
		    return post.id;
		});

		postIds = JSON.stringify(postIds); // в принципе, можно было и join'ом

		localStorage.setItem(postsIds_key, postIds);
		var postIds, posts;
		//prefix определён выше.
		//postsIds_key тоже определён выше.

		postIds = localStorage.getItem(postsIds_key);

		if (postIds) {
		    postIds = JSON.parse(postIds);
		    posts = $.map(postIds, function (postId) {
		        post = localStorage.getItem(prefix + postId);
		        post = JSON.parse(post);
		        return post;
		    });
		} else { 
			$.getJSON(
				'json/posts.json',
				function(data){
					$.each(data, function(postIndex, post) {
            			localStorage.setItem('post_id'+post['id'], JSON.stringify(post));
           				posts += localStorage['post_id'+post['id']];
        			})

			});	
		}
			//Выводим посты
			$.each(posts, function(entryIndex, entry) {
					post = '<article><header><h3>';
					post += entry['title']+'</h3></header><section><p>';
					post += entry['body']+'</p></section><footer>';
					if(entry['tags']){
						post += '<div id="tags">';
						$.each(entry['tags'], function(tagIndex, tag){
							post += '<span class="label">' + tag + '</span>'
						});
						post += '</div><div class="controls"><a class="btn btn-danger btn-mini">удалить</a></div>';
					}
					post += '</footer></article>';
					$('#posts').append(post);
       		 });		
});

[melky]

Хм..сейчас попробую... можете описать подробнее эту строку, которую я процитировал. Хочется все таки разобраться полностью в коде, дабы в понять его и в дальнейшем уже самому знать как это делать.

если в переменной postIds есть правдивое значение (т.е. получили значение из хранилища, и переделали его в массив), то взять из массива последнее значение, увеличить его на 1, и вернуть. иначе - вернуть 0. возвращённое значение вбирает в себя post.id

Попробовал..но теперь посты вообще не выводятся. Да и хранилище почему то опустело. Код изменил вот так:

само собой. похоже, что Вы вообще не поняли, что делает мой код. что именно Вам не понятно в моём алгоритме и в смешивании моего кода с Вашим?

[Философ]

Я написал выше что непонятно..но видимо остальное не так понимаю...сейчас вот немного изменил код опять(но мне кажется не правильно..но посты в хранилище записываются..но не выводятся..( и да, значение ключа post_ids стало почему то undefined)что ж опять не так в коде? Сейчас нужно хотя бы так изменить код, чтобы просто выводил сохраненные уже в хранилище базовые значения из JSON файла, потом уже на клик просто добавить код добавления поста.

// JavaScript Document
	$(document).ready(function(){
			var post, posts, postIds, prefix = "post_id_", postsIds_key = "post_ids";
			//Доавление постов в localStorage
			$.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;
				});	
			
			});

			postIds = JSON.stringify(postIds); // в принципе, можно было и join'ом

			localStorage.setItem(postsIds_key, postIds);

			postIds = localStorage.getItem(postsIds_key);

			if (postIds) {
			    postIds = JSON.parse(postIds);
			    posts = $.map(postIds, function (postId) {
			        post = localStorage.getItem(prefix + postId);
			        post = JSON.parse(post);
			        return post;
			    });
			} else { 
				$.getJSON(
					'json/posts.json',
					function(data){
						$.each(data, function(postIndex, post) {
	            			localStorage.setItem('post_id'+post['id'], JSON.stringify(post));
	           				posts += localStorage['post_id'+post['id']];
	        			})
				});	
			}
				//Выводим посты
				$.each(posts, function(entryIndex, entry) {
						var html = '<article><header><h3>';
						html += entry['title']+'</h3></header><section><p>';
						html += entry['body']+'</p></section><footer>';
						if(entry['tags']){
							html += '<div id="tags">';
							$.each(entry['tags'], function(tagIndex, tag){
								html += '<span class="label">' + tag + '</span>'
							});
							html += '</div><div class="controls"><a class="btn btn-danger btn-mini">удалить</a></div>';
						}
						html += '</footer></article>';
						$('#posts').append(html);
	       		 });		
	});

[Философ]

Хм....сейчас сам попытался опять изменить...выводило..попроб� �вал добавить функцию добавления поста при клике...Но, посты перестали выводится, а в хранилище появилось:
post_id_NaN =>[""]
post_id_undefined=>""
post_ids=>NaN
И в итоге посты не выводятся(

Вот весь код:

// JavaScript Document
$(document).ready(function(){
	//$.getJSON(
	//	'json/posts.json',
	//	function(data){
		//var prefix = "post_id", postsIds_key = "post_ids";
		var post, postIds, prefix = "post_id_", postsIds_key = "post_ids";

	//	postIds = $.map(data, function (post) {
	//	    var stringified = JSON.stringify(post);
	//	    localStorage.setItem(prefix + post.id, stringified);
	//	    return post.id;
	//	});

		postIds = JSON.stringify(postIds); // в принципе, можно было и join'ом

		//localStorage.setItem(postsIds_key, postIds);

	  	//$.each(data, function(postIndex, post) {
		//	localStorage.setItem('post_id'+post['id'], JSON.stringify(post));
		//	posts += localStorage['post_id'+post['id']];
		//})
		// prefix определён выше.
		// postsIds_key тоже определён выше.

		postIds = localStorage.getItem(postsIds_key);

		if (postIds) {
		    postIds = JSON.parse(postIds);

		    posts = $.map(postIds, function (postId) {
		        var post;
		        post = localStorage.getItem(prefix + postId);
		        post = JSON.parse(post);
		        
		        return post;
		    });
		} 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, postIds);
		}
			$.each(posts, function(entryIndex, entry) {
					var html = '<article><header><h3>';
					html += entry['title']+'</h3></header><section><p>';
					html += entry['body']+'</p></section><footer>';
					if(entry['tags']){
						html += '<div id="tags">';
						$.each(entry['tags'], function(tagIndex, tag){
							html += '<span class="label">' + tag + '</span>'
						});
						html += '</div><div class="controls"><a class="btn btn-danger btn-mini">удалить</a></div>';
					}
					html += '</footer></article>';
					$('#posts').append(html);
       		 });
		//});
		//Добавление поста
		$('button[type="submit"]').click(function(){
			var post ={
				title: $('#zagol').val(),
				body: $("#body").val(),
				tags: $('#tags').val()
			}
			postIds = $.map(post, function (post) {
		    		var stringified = JSON.stringify(post);
		    		post.id = postIds ? postIds[postIds - 1] + 1 : 0;
		    		localStorage.setItem(prefix + post.id, stringified);
		    		return post.id;
					});
                        postIds = JSON.stringify(postIds);
			localStorage.setItem(postsIds_key, postIds);
		});
});

[Deff]

Философ,
Не вникал в тему, но был собственный опыт сохранения именно постов в localStorage в формате base64. Парсицо достаточно быстро, разница в визуальном отображений ( для постов более страницы) фактически не заметна

Рабочий пакер - пост 21 самый низ=> Подскажите символьный паккер, лучше чем base64

[Философ]

и также с тегами? Хм..подскажите тогда что ж у меня не так?

[Deff]

и также с тегами?

С тегами с HTML (со всем чем угодно

[melky]

переписал всё. если не будет работать - напишите в начале функции 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("");
  });
});