в коде, где достаем записи из хранилища :
Цитата:
Цитата:
что-то вроде такого :
var post = {
title: $("#zagol").val(),
body: $("#body").val(),
.....
}
и да, только получение текста ( bla bla.val() + bla.val() ) нужно делать в обработчике клика, иначе пустые значения будут. Цитата:
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);
});
});
|
Цитата:
Цитата:
|
Я написал выше что непонятно..но видимо остальное не так понимаю...сейчас вот немного изменил код опять(но мне кажется не правильно..но посты в хранилище записываются..но не выводятся..( и да, значение ключа 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);
});
});
|
Философ,
Не вникал в тему, но был собственный опыт сохранения именно постов в localStorage в формате base64. Парсицо достаточно быстро, разница в визуальном отображений ( для постов более страницы) фактически не заметна Рабочий пакер - пост 21 самый низ=> http://javascript.ru/forum/misc/2931...tml#post185226 |
и также с тегами? Хм..подскажите тогда что ж у меня не так?
|
Цитата:
|
переписал всё. если не будет работать - напишите в начале функции 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("");
});
});
|
| Часовой пояс GMT +3, время: 01:31. |