Dodawanie dynamiczne wartości, zapis a odczyt

0

Siema,
Tworzę stronę, która ma statyczne divy z id i mam tzw modal, w którym mam formularz. W formularzu wybieram za pomocą select, do którego diva ma zostać dodany dynamicznie div z dwoma wartościami (nazwa i wartość + dane się zapisują do LocalStorage). Do tego miejsca wszystko jest ok, gdy odświeżę stronę funkcja, pobiera klucz z wartością i dodaje dynamicznie do diva. W jaki sposób zapisywać klucze, żeby np div1 miał tylko dodawane wybrane klucze. W obecnej chwili wszystkie klucze, które zostały zapisane w LS, są dodawane do pierwszego diva, a ja zapisałem np nową wartość do trzeciego diva itd.
Zamieszczam link o co mi mniej więcej chodzi http://jsfiddle.net/4am10d8s/

0

Dodałem nawias na końcu i działa, tzn. dodaje wartości do różnych divów w zależności od wyboru.

0

Owszem, to działało, tylko zgubiłem nawias. Teraz mi chodzi, że gdy odświeżę stronę to chce, żeby te wartości zostały w danych divach. Mam funkcje listAllItems(), która wczytuję klucze z localstorage i je wrzuca tylko jak ją przerobić, żeby w zależności, do którego diva została dodana wartość tam pozostała.

0

Możesz odwzorować interakcje użytkownika w LocalStorage w następujący sposób:

img1.png

To wymagałoby małej przebudowy Twojego kodu:

function createEl() {
  var doc = document.getElementById("formControl");
  var keyForLocalStroage = doc.options[doc.selectedIndex].value;
  var valuesForLocalStorage;
  var localStorageItem = localStorage.getItem(keyForLocalStorage);
  ...
  
  var valueForLocalStorage = {
    propertyA: valuee,
    propertyB: name
  }
  !localStorageItem ? valuesForLocalStorage = [] : valuesForLocalStorage = JSON.parse(localStorageItem);
  valuesForLocalStorage.push(valueForLocalStorage);
  localStorage.setItem(keyForLocalStroage, JSON.stringify(valuesForLocalStorage));
  elementId.appendChild(createRow);
}

Następnie w "listAllItems()" możesz wyczytać wartości z LocalStorage korzystając z "JSON.parse":

for (i = 0; i < localStorage.length; i++) {
  key = localStorage.key(i);
  var localeStorageItem = JSON.parse(localStorage.getItem(key));
  ...
}
0

Przy edycji kodu natknąłem się na dwa problemy:
pierwszy: konsola pokazuje, że valuesForLocalStorage.push is not a function
drugi: po zapisaniu danych i ponownym wczytaniu pokazują się obiekty

0

Do problemu pierwszego: wrzuć kod do "jsfiddle". Wygląda jakby "valuesForLocalStorage" nie było zainicjalizowaną tablicą.
Do problemu drugiego: korzystasz przy wyczytaniu z "JSON.parse(localStorage.getItem(key))"?

1 użytkowników online, w tym zalogowanych: 0, gości: 1