JSON localStorage

[biryukovm]

Привет всем встала задача сделать Json массив по которому будет храниться некоторая информация а точнее.

1. Создается Массив JSon
2. Дополняем массив
3. Если необходимо удаляем из массива не нужные параметры
4. Сравниваем массив на изменения и обновляем его.
PS.
На чистом JS без jQuery




По 1 пункту это мне далось легко:

var tovar_list = [{
"tovar":"tovar_26",
"price":"266"
}];
localStorage.setItem("tovar_list",JSON.stringify(tovar_list));



По 2 пункту как всегда наш о великий Google стал помогать:

var tovar_list = [{
"tovar":"tovar_27",
"price":"362"
}];
if (localStorage.getItem("tovar_list ")) {
alert('Вывод');
var data = {};
data = localStorage.getItem("tovar_list ");// Вытаскиваем массив
if (data>''){stavka = JSON.stringify(tovar_list)+','+JSON.stringify(stav ka)}

alert (JSON.stringify(stavka) );
localStorage.setItem("tovar_list ", tovar_list);// записываем полученный новый массив обьединеный
}else{
localStorage.setItem("tovar_list ",JSON.stringify(tovar_list)); // Записываем массив если он пуст то пишем по умоланию
alert('Запись '+ tovar_list);
}

И в итоге у меня появились какието слэши и с каждым добовление нового значение слэши увеличиваются


"\"{\\\"tovar\\\":\\\"tovar_23\\\",\\\"price\\\":\\\"3624\\\"}\",{\"tovar\":\"tovar_21\",\"price\":\"424\"}


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

[laimas]

localStorage.getItem("tovar_list ");// Вытаскиваем массив

var data = JSON.parse(localStorage.getItem("tovar_list "));// Вытаскиваем массив

[biryukovm]

var data = JSON.parse(localStorage.getItem("tovar_list "));// Вытаскиваем массив

Этого проблема у меня нету в коде "tovar_list " видемо когда добовлял опечатка

[laimas]

Этого проблема у меня нету в коде

Не знаю, если у вас проблема, нет, но

var data = {}; - объявлена переменная как объект, которая затем заменяется строкой
data = localStorage.getItem("tovar_list ");

Ну а что дальше будет бардак, пояснять не надо.

[biryukovm]

Я переделал немного код на

if (localStorage.getItem("tovar_list")) {
data = localStorage.getItem("tovar_list");// Вытаскиваем массив
if (data>''){stavka = data+','+JSON.stringify(tovar_list)}

alert (JSON.stringify(tovar_list) );
localStorage.setItem("tovar_list",tovar_list);// записываем полученный новый массив обьединеный
}else{
localStorage.setItem("tovar_list",JSON.stringify(tovar_list)); // Записываем массив если он пуст то пишем по умоланию
alert('Запись '+ tovar_list);
}


Теперь отображается
"{\"tovar\":\"tovar_23\",\"price\":\"3624\"},{\"tovar\":\"tovar_21\",\"price\":\"424\"}

Но я как понимаю что это не JSON формат а строковый, как тогда его сделать в JSON я уже запутался

[laimas]

У вас массив объектов, следовательно по умолчанию должен быть массив. Вот так: есть сохраненный, значит получаем, добавляем, сохраняем и т.д.

var data = localStorage.tovar_list && JSON.parse(localStorage.tovar_list) || [];
data.push({data : new Date().toString()})
localStorage.tovar_list = JSON.stringify(data);

alert(JSON.stringify(data))

Все нормально?

[biryukovm]

У вас массив объектов, следовательно по умолчанию должен быть массив. Вот так: есть сохраненный, значит получаем, добавляем, сохраняем и т.д.

var data = localStorage.tovar_list && JSON.parse(localStorage.tovar_list) || [];
data.push({data : new Date().toString()})
localStorage.tovar_list = JSON.stringify(data);

alert(JSON.stringify(data))

Все нормально?


Ваще не понял что о чем

[laimas]

Ваще не понял что о чем

Сожалею.

localStorage хранит ни массивы, ни объекты, ни т.п., а строки. Ваш объект в нем будет хранится в виде json-строки, после преобразования JSON.stringify(), и

localStorage.getItem("tovar_list");// Вытаскиваем массив

это "вытащили" не массив, а строку, а чтобы она была массивом объектов, ее нужно преобразовать в таковой объект, и делает это JSON.parse().

Только после этого можно манипулировать массивом и объектами в нем.

https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/JSON

[biryukovm]

Сожалею.

localStorage хранит ни массивы, ни объекты, ни т.п., а строки. Ваш объект в нем будет хранится в виде json-строки, после преобразования JSON.stringify(), и

localStorage.getItem("tovar_list");// Вытаскиваем массив

это "вытащили" не массив, а строку, а чтобы она была массивом объектов, ее нужно преобразовать в таковой объект, и делает это JSON.parse().

Только после этого можно манипулировать массивом и объектами в нем.

https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/JSON

Тогда я не понимаю этого
var data = localStorage.tovar_list && JSON.parse(localStorage.tovar_list) || [];


Он мне постоянно возвращает []
когда мне надо если есть в localStorage уже что то то дополнить если нет то создать

[laimas]

Тогда я не понимаю этого

var data =
localStorage.tovar_list - если в локальном хранилище есть свойство tovar_list
&& JSON.parse(localStorage.tovar_list) - и получаем объект
|| []; - иначе объявляем массив

Это и есть выполнение "когда мне надо если есть в localStorage уже что то то дополнить если нет то создать". Хотя это условие можно описать и иначе. У вас проблемы не в этом, а в том, что вы работая со строкой, думаете, что это объект.

Запустите несколько раз пример что я приводил, будет видно как в массив добавляется новые объекты. При этом json корректна.

[biryukovm]

Да я посмотрел Ваш код работает, Но как мне использовать эту строчку по уму
data.push({data : new Date().toString()})

Когда у меня данные

var tovar_list = {
"tovar": p1,
"price": p2,
"tip": p3,
"sort": p4,
"massa": p5
};

Делаю data.push({data : new tovar_list}) не помогает

[laimas]

как мне использовать эту строчку по уму
data.push({data : new Date().toString()})


Никак, это просто для примера. Используйте свои, но извлекая из хранилища данные, преобразовывайте их в массив/объект, и только потом работайте с ним. Неужели до сих пор не понятно?

[biryukovm]

Никак, это просто для примера. Используйте свои, но извлекая из хранилища данные, преобразовывайте их в массив/объект, и только потом работайте с ним. Неужели до сих пор не понятно?

Я же сразу написал что не профи в этих делах мне с PHP легче разбраться чем с JS

[laimas]

мне с PHP легче разбраться

Ну хорошо. В РНР тоже можно работать с JSON, которая и для него это строковое значение. Ваш php-сценарий получает такой json "[1,2,3]" в переменной $a. Вопрос: можно сразу получить из него значение индекса один как $a[1] или сначала нужно преобразовать json в массив - json_decode("[1,2,3]")?

[biryukovm]

Ну хорошо. В РНР тоже можно работать с JSON, которая и для него это строковое значение. Ваш php-сценарий получает такой json "[1,2,3]" в переменной $a. Вопрос: можно сразу получить из него значение индекса один как $a[1] или сначала нужно преобразовать json в массив - json_encode("[1,2,3]")?

это я знаю но не могу перекидывать обработку на PHP так как уже очень много AJAX подкюючений**/*******


Я разобрался и у меня получилось использовать Ваш код под свои корректировки правильно коротко говоря вот

var tovar_list = {
"tovar": p1,
"price": p2,
"tip": p3,
"sort": p4,
"massa": p5
};


var data = localStorage.tovar_list && JSON.parse(localStorage.tovar_list) || [];
data.push(tovar_list)
localStorage.tovar_list = JSON.stringify(data);

alert(JSON.stringify(data))


Подскажите пожалуйста еще такой момент как можно удалить часть массива
А точнее полностью {"tovar": p1,"price": p2,"tip": p3,"sort": p4,"massa": p5}

Зная только данные о "tovar": p1

[laimas]

Делаю data.push({data : new tovar_list}) не помогает

data.push(tovar_list)

Вот только зачем? Если есть объект, свойства которого могут изменять и который нужно хранить, зачем же его прятать в массив, храните сам объект.

[laimas]

не могу перекидывать обработку на PHP так как уже очень много AJAX подкюючений

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

как можно удалить часть массива

Элемент массива так: https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/splice.

Вы что делаете, корзину товаров на клиенте?

[biryukovm]

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



Элемент массива так: https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/splice.

Вы что делаете, корзину товаров на клиенте?

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

Я посмотрел метод splice() и прихожу к тому что мне надо в массиве создать ключь и в ключе иметь параметры и если надо удалить то что то удаляю я ключь с параметрами или можно по другому ?

И чуть не забыл как можно избавиться от добовления дублей в этом ммассиве предположим добавили торт 1,2,3 и пользователь опять жмет на 2 торт но он уже естькак его не добовлять ?

[laimas]

в массиве создать ключь

КЛЮЧ ;)

Нет ключей в js-массивах, так как в JS нет ассоциативных массивов, но есть объекты, в которых свойства и будут ключами ассоциации. То есть ход вашей мысли правильный, но только не массив, а объект хранящий объекты, свойствами первичного объекта которого будут уникальные идентификаторы ваших товаров или чего-то, что "фиксят" ваши менеджеры. То есть:

var data = {
p1 : {
price: p2,
tip: p3,
sort: p4,
massa: p5
},
.....
}

если p1 и есть уникальный идентификатор. Такое хранение решит и проблему дубликатов.

[biryukovm]

КЛЮЧ ;)


если p1 и есть уникальный идентификатор. Такое хранение решит и проблему дубликатов.

А как перепроверку сделать на существование ил на перезапись ?

[laimas]

перезапись

Просто записываем значение свойства:

data[идентификатор] = {данные}

Если такое свойство (идентификатор) уже есть в объекте data, то его данные заменится новыми, иначе в data будет добавлено новое свойство (идентификатор) с данными.

Если есть необходимость узнать есть ли свойство (идентификатор) в объекте, то можно получить свойства объекта в массив и в нем проверить:

if(~Object.keys(data).indexOf(свойство)) {
//есть такое свойство у объекта
}

PS. Тут важен контекст понятия "узнать", можно ведь просто проверить что вернет обращение к свойству объекта, а не перебирать ключи.

PS. А удалить свойство объекта - delete data[свойство]

[biryukovm]

Подскажите еще такой вопрос.
Я делаю ключь

var key = tov_key+key_ves+key_name;
alert(key);
var tovar_list = {key:{
"tovar":"tovar_27",
"price":"362"
}};


И на выходе получаю
key:{"tovar":"tovar_27","price":"362"} -- а надо чтобы key изменилось на то что я указывал а не названием переменной.

И еще такой момент как я могу сжать key предположим он будет в длину 450 символов что и есть неудобно и превести его в единый формат типа Base64 или MD5 нашел статейки но так и не понял почему не работает

[laimas]

Я делаю ключь

Ключ, а не ключь, чай не блондинка. :)

var key = tov_key+key_ves+key_name

Это что?

а надо чтобы key изменилось на то что я указывал а не названием переменной

Вы говорили, что в РНР разбираетесь. Тогда чтобы понятней было, будем оперировать им. У вас есть массив:

$a = [
'as' => 'value',
25 => 'value'
]

Вопрос - можно ли кличи этого массива переименовать?

[laimas]

я могу сжать key предположим он будет в длину 450 символов что и есть неудобно и превести его в единый формат типа Base64 или MD5

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

Кстати, Base64, это скорее экспандер, а не сжиматель, так как результат будет в три раза длиннее исходного, а MD5, это хеш.

[biryukovm]

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

Кстати, Base64, это скорее экспандер, а не сжиматель, так как результат будет в три раза длиннее исходного, а MD5, это хеш.

Тут все по серьезному только для взрослых

[laimas]

Тут все по серьезному только для взрослых

Глупости все это, хотя хрен знает чего вы там изобретаете. Но сам вопрос "как переименовать свойство" наводит на мысли нехорошие, чего-то не то и не так делается. )

[biryukovm]

Ну в общем вот массив который у меня формируется:
[
{"key":"16a3f79f7f1abc856e3a897ed5c71616","param":{"tip":"1","tip2":"tewer"}},
{"key":"1a79c7ebdb390269cca0d2675ef78204","param":{"tip":"1","tip2":"sik"}},
{"key":"83bec884740a900a86f06a0963f07e82","param":{"tip":"1","tip2":"anlo"}}
]

Я за место Object.keys(data).indexOf пошел немного другим методом

var val,param,num_s = 0;
for (val of data) {
num_s++;
param = JSON.stringify(val);
alert(param.key+' = '+num_s)
}

Если я пишу alert(param+' = '+num_s) то выводит каждую строку:
[{"key":"83bec884740a900a86f06a0963f07e82","param":{"tip":"1","tip2":"anlo"}}]


В интернете пересмотрел методы перебора массивов и там не описано более сложный формат
В итоге я пробывал и так
alert(param.key+' = '+num_s)
И так
alert(param[1]+' = '+num_s)
И так
alert(param[0].key+' = '+num_s)




В итоге так и не могу вытащить нужный мне параметр "key" выдет постоянно "undefined"
Как его правильно указать ?

[laimas]

Так как вы представляете свои объекты через .... понятно что, поэтому и маетесь. Ну была мысль в правильном направлении - не массив, а объект объектов.

Что это вообще за хрень такая "key":"83bec884740a900a86f06a0963f07e82", то что вы и пытаетесь переименовать? Хрен с ним, переименовывайте, но у этой сущности тем более должен быть уникальный идентификатор, иначе она будет потеряна.

for (val of data) { ... у вас массив объектов, и если перебирать циклом для поиска, то обычный
for(var i=0; i< data.length; i++) {
if(data[i].key == 'hash') {
//что-то делаем
break;
}
}

[biryukovm]

Что это вообще за хрень такая "key":"83bec884740a900a86f06a0963f07e82", то что вы и пытаетесь переименовать? Хрен с ним, переименовывайте, но у этой сущности тем более должен быть уникальный идентификатор, иначе она будет потеряна.



Эта хрень и есть идентификатор, а точнее основные параметры товара переведены в MD5, я думаю что это сравнивать легче чем строку в 350 символов

[laimas]

Эта хрень и есть идентификатор, а точнее основные параметры товара переведены в MD5

Вообще охренеть. :) Идентификатор по параметрам товара? Это нечто. Идентификатор сущности в базе, это некое уникальное значение, которое может быть сформировано средствами SQL автоматически при добавлении сущности в базу. Делается это просто - полем типа INT с первичным ключом и автоикрементом.

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

[biryukovm]

Вообще охренеть. :) Идентификатор по параметрам товара? Это нечто. Идентификатор сущности в базе, это некое уникальное значение, которое может быть сформировано средствами SQL автоматически при добавлении сущности в базу. Делается это просто - полем типа INT с первичным ключом и автоикрементом.

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

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


Там видете какая фишка чтобы у менеджера допустим за сегодня не повторялось значение этого товара пока он находится в работе на сайте, эту уникальность я и могу добиться с MD5

[laimas]

я не могу дергать постоянно MYSQL

Что касается базы, то в ней есть понятие Индекс, которое уж точно вам должно быть известно. Следовательно "чем дергать по нескольким словам", это надуманная проблема при наличии индекса в нужном поле/полях.

Я не спорю, что нельзя использовать собственные значение как ключи, например это же делается в случае тегов. Но каким образом можно обеспечить уникальность в вашем случае основанных на параметрах? Конечно мне не известно многое, либо вы излагаете так, что такого просто не может быть, так как если понимать все как есть, то например:

товар А синий квадратный
товар Б зеленый круглый
товар Г синий квадратный

И если хеш по параметрам, то у товара А и Г они будут одинаковы.

Но если все у вас Ок, то как перебрать и найти показано.

[laimas]

И да, все ведь еще зависит и от того какова цель хранения. Например, если некто работает с определенным набором, то в хранилище в конечном итоге достаточно хранить только идентификаторы этого набора. При входе вновь, к базе потребуется только один запрос - загрузить сущности этих идентификаторов, и продолжать работать.

Но это к слову, так как цели ваши не известны.

[biryukovm]

Но если все у вас Ок, то как перебрать и найти показано.

Да у меня уникальность получилась и работает, но я вот пытаюсь ваш метот использовать по перебору
И даже при таком
for(var i=0; i< data.length; i++) {
alert(JSON.stringify(data[i].key));

ИЛИ так

alert(data[i].key);

}

Выходит undefined
А я привык видеть что мне сравнивать

[laimas]

JSON.stringify(data[i].key)

Это что такое и зачем? У вас свойство key объекта, это строка, хеш, какие тут могут быть JSON.stringify(data[i].key) к ней?

var data = [
{"key":"16a3f79f7f1abc856e3a897ed5c71616","param":{"tip":"1","tip2":"tewer"}},
{"key":"1a79c7ebdb390269cca0d2675ef78204","param":{"tip":"1","tip2":"sik"}},
{"key":"83bec884740a900a86f06a0963f07e82","param":{"tip":"1","tip2":"anlo"}}
];
for(var i=0; i < data.length; i++) {
alert(data[i].key)
//если ищем в хеш определенный, то
if(data[i].key == '1a79c7ebdb390269cca0d2675ef78204') {
alert(i) //индекс в котором найден объект с данным хеш
break
}
}

[biryukovm]

Это что такое и зачем? У вас свойство key объекта, это строка, хеш, какие тут могут быть JSON.stringify(data[i].key) к ней?

var data = [
{"key":"16a3f79f7f1abc856e3a897ed5c71616","param":{"tip":"1","tip2":"tewer"}},
{"key":"1a79c7ebdb390269cca0d2675ef78204","param":{"tip":"1","tip2":"sik"}},
{"key":"83bec884740a900a86f06a0963f07e82","param":{"tip":"1","tip2":"anlo"}}
];
for(var i=0; i < data.length; i++) {
alert(data[i].key)
//если ищем в хеш определенный, то
if(data[i].key == '1a79c7ebdb390269cca0d2675ef78204') {
alert(i) //индекс в котором найден объект с данным хеш
break
}
}

Я вот что то понять не могу Ваш премер идеально срабатывает переношу к себе не работает.

var data = localStorage.stavka && JSON.parse(localStorage.stavka) || [];

for(var i=0; i < data.length; i++) {
alert(data[i].key)
//если ищем в хеш определенный, то
if(data[i].key == '1a79c7ebdb390269cca0d2675ef78204') {
alert(i) //индекс в котором найден объект с данным хеш
break
}


Ничего не меняя цыкл идет это видно но по пораметру alert(data[i].key) отображает undefined

[biryukovm]

Удивительно покалдовал и заработало видимо где-то в синтаксисе ошибка или кэш

[laimas]

это видно но по пораметру alert(data[i].key) отображает undefined

Это значит, что нет такого вообще, не определено. Коли тренируетесь, значит есть ошибки, и это не кеш виноват, а есть какой-то бардак в хранилище. Хранилище можно очистить все методом clear().

[biryukovm]

Это значит, что нет такого вообще, не определено. Коли тренируетесь, значит есть ошибки, и это не кеш виноват, а есть какой-то бардак в хранилище. Хранилище можно очистить все методом clear().



Я же уже написал что подправил, подскажите такой момент по удаления Вы подсказали использовать splice

я его спользую так data.splice(0, i);
Он работает и даже все хорошо но вот проблемка есть он удаляет и все последующие значения что есть в массиве, а как удалить только определенные индексы массива

[laimas]

проблемка есть он удаляет и все последующие значения что есть в массиве, а как удалить только определенные индексы массива


Просто внимательно прочесть о методе (https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/splice), его параметрах. Индекс массива в котором найдено знаем и что удалять надо один элемент тоже.

[biryukovm]

Просто внимательно прочесть о методе (https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/splice), его параметрах. Индекс массива в котором найдено знаем и что удалять надо один элемент тоже.



Подскажите еще такой момент

У нас есть массив
var data = [
{"key":"16a3f79f7f1abc856e3a897ed5c71616","param":{"tip":"1","tip2":"tewer"}},
{"key":"1a79c7ebdb390269cca0d2675ef78204","param":{"tip":"1","tip2":"sik"}},
{"key":"83bec884740a900a86f06a0963f07e82","param":{"tip":"1","tip2":"anlo"}}
];

И нам надо изменить в нем всего лишь "tip2":"anlo" на "tip2":"anlo2"

Это также делается с data.splice(i, 1); --?

Я вот получается предполагаю так что берем массив в начале прогибаем и вытаскиваем param
Потом по param опять запускаем цыкл пробежки и потом меняем по data.splice(i, 1); но у меня.
В голове не укладывается как обратно все склеить?

или есть более легче способ ?

[laimas]

Это также делается с data.splice(i, 1); --?

Нет, это делается обращением к этому свойству и присвоения ему нового значения. То есть в данном случае

data[2].param.tip2 = "anlo2"