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

[Философ]

Дык это ж закоммеченный блок, я уже понял что это не решение.

[Философ]

Подскажите плз ,как же правильно вывести данные?

[melky]

писалось на коленке, может не работать. ну, я проверил в консоли, на сайте JQ, работает
только хоть с JQ, хоть без неё, для старых браузеров нужно искать имплементацию JSON.stringify на JS.

сохраняем так :

http://api.jquery.com/jQuery.map/

var 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) {
        var post;
        post = localStorage.getItem(prefix + postId);
        post = JSON.parse(post);
        return post;
    });
} else { /* нет сохранённых ID'шников */ }

[Философ]

Хм...не совсем понятна эта строка:

var stringified = JSON.stringify(post);

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

ЗЫ: попробовал - все равно [object] и андефайнд

[melky]

Хм...не совсем понятна эта строка:
var stringified = JSON.stringify(post);

переводит объект в JSON:

{
        "id": 1,
        "title": "Стремящийся наибольший",
        "body": "Поле направлений нейтрализует коллинеарный полином, откуда следует доказываемое равенство.",
        "tags": [
            "тег", "еще тег"
        ]
    }
// стало 
'{"id":1,"title":"Стремящийся наибольший","body":"Поле направлений нейтрализует коллинеарный полином, откуда следует доказываемое равенство.","tags":["тег","еще тег"]}'

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

следовательно, код из "сохраняем так" записываем в обработчик события завершения запроса, в котором достаем JSON файл.

[Философ]

Хм...чтото нифига не выходит( Вообще теперь ничего не выводит и не происходит. Код стал таким:

// JavaScript Document
$(document).ready(function(){
		function isLocalStorageAvailable(){
				try {
					return 'localStorage' in window && window['localStorage'] !== null;
				} catch (e) {
					return false;
				}
			}
		try {
			//localStorage.setItem('foo', 'bar');
		} catch (e) {
			if (e == QUOTA_EXCEEDED_ERR) {
				alert('Локальное хранилище переполнено');
			}
		}
	$.getJSON(
		'json/posts.json',
		function(data){
		var prefix = "post_id", postsIds_key = "post_ids";
	  	$.each(data, function(postIndex, post) {
			localStorage.setItem('post_id'+post['id'], JSON.stringify(post));
			posts += localStorage['post_id'+post['id']];
		})
		var postIds, posts;
		// 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 { /* нет сохранённых ID'шников */ }
		alert(post);
		var ololo = $.parseJSON(localStorage['post_id1']);
		//alert(ololo.title);
		alert(posts);

			$.each(posts, function(entryIndex, entry) {
					var 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]

неправильно сохраняете. чтобы работало восстановление, нужно сохранять так же, как я написал. эти 2 куска кода взаимосвязаны

[Философ]

Хм...попробовал весь Ваш код вместо своего. Работает! Теперь тогда таков вопрос..внизу форму добавления поста..и кнопка удаления.. Как реализовать так, чтобы кнопка удаления удаляла именно свой пост?

[melky]

в атрибут записать ID поста, к которому она относится.

дальше просто удалить элемент (пост) со страницы, удалить его из хранилища, и подправить массив postIds :
если не исправлять массив postIds, тогда будем иметь в нём мёртвые ID'шники постов. оно Вам надо?

$delete_button.parents("article").remove(); // для начала удалим пост со страницы.
/*
 можно даже проанимировать

  $delete_button.parents("article").slideUp("slow", function () {
      $(this).remove();
  });
*/


var id = $delete_button.attr(...); // получим тут 3, например - ID поста, к которому относится кнопка. вместо троеточия пишем атрибут, в котором сохранён ID.

localStorage.removeItem(prefix + id); // удалим пост из хранилища

// теперь удалим значение из массива.
// postIds должен быть уже получен ранее.
var index = postIds.indexOf(id);

postIds.splice(index, 1); // удалили

// теперь сохраним измененный массив в хранилище. можно сразу
localStorage.setItem(postsIds_key, postIds);

[Философ]

Спасибо! Сейчас попробую....и ещё 2 вопроса...Как сделать так, чтобы хранилище заполнялось базовыми данными из JSON файла, только первый раз, а потом, если уже заполнено - то не трогало его...и по поводу добавления поста..я не совсем понимаю... Форма добавления состоит из таких полей:

<input type="text" name="title" class="span4" placeholder="заголовок"><br>
                <textarea name="body" rows="3" class="span4" placeholder="запись"></textarea><br>
                <input type="text" name="tags" class="span4" placeholder="тег, еще тег"><br><br>

                <button type="submit" class="btn btn-primary">добавить</button>

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

var post =$('#zagol').val();
var post +=$('#body').val();
var post +=$('#tags').val();
$('.btn-primary').click(function(){
    var stringified = JSON.stringify(post);
    localStorage.setItem(prefix + post.id, stringified);
});

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