Local storage - problem z zapisem danych z formularza

Odpowiedz Nowy wątek
2019-05-15 11:02
0

Muszę zapisać wybrane dane z formularza do local storage. Raz się udało. Po wyświetleniu długości zawartości local storage wartością wyświetlaną było 3 (zapisałam tam 3 rzeczy więc ok). Niestety kiedy chce zapisać kolejne to albo nie zapisuje ich albo nadpisuje mi poprzednie - nie mogę stwierdzić, które się dzieje bo chociaż próbuję wyświetlić zawartość to dostaję NaN lub null.
Proszę o wskazanie błędów bo niestety już nie mam pomysłu.

<form action="#" method="post">
<div><label for="imie">Imię<input type="text" required="required" id="imie"></label></div>
<div><label for="email">Adres e-mail<input type="email" required="required" id="email"></label></div>
<div><label>Jaki przepis chciałbyś/chciałabyś zobaczyć na stronie?<textarea id="jakiprzepis"></textarea></label></div>
<input type="reset" value="Wyczyść"/>
<button name="Wyślij">Wyślij</button>
</form>
var name = document.getElementById('imie').value;
var email = document.getElementById('email').value;
var recipe = document.getElementById('jakiprzepis').value; 

localStorage.setItem("name", name);
localStorage.setItem("email", email);
localStorage.setItem("recipe", recipe);

/*próbowałam wyświetlać wartości ale nie wychodzi*/
var pokaz = parseInt(localStorage.getItem("name"));
alert(pokaz);

Pozostało 580 znaków

2019-05-15 11:20
0

nadpisuje mi poprzednie

No ale czy to jest dziwne? Skoro dajesz polecenie

localStorage.setItem("name", name);

to oznacza to, żę pod kluczem o nazwie "name" zapisujesz konkretną wartość. Podczas kolejnej próby zapisu w tym samym miejscu, poprzednia wartość zostanie napisania - The setItem() method of the Storage interface, when passed a key name and value, will add that key to the given Storage object, or update that key's value if it already exists. - https://developer.mozilla.org[...]/docs/Web/API/Storage/setItem

A co do fragmentu próbowałam wyświetlać wartości ale nie wychodzi - na razie nie baw się żadnym parseInt, pobierz to w takiej postaci, jaka zostanie zwrócona, a potem wywal go alertem i zobacz, co się pojawi.


That game of life is hard to play
I'm gonna lose it anyway
The losing card I'll someday lay
So this is all I have to say
edytowany 2x, ostatnio: cerrato, 2019-05-15 11:22

Pozostało 580 znaków

2019-05-15 11:26
0
cerrato napisał(a):

nadpisuje mi poprzednie

No ale czy to jest dziwne? Skoro dajesz polecenie

localStorage.setItem("name", name);

to oznacza to, żę pod kluczem o nazwie "name" zapisujesz konkretną wartość. Podczas kolejnej próby zapisu w tym samym miejscu, poprzednia wartość zostanie napisania - The setItem() method of the Storage interface, when passed a key name and value, will add that key to the given Storage object, or update that key's value if it already exists. - https://developer.mozilla.org[...]/docs/Web/API/Storage/setItem

Słusznie tylko nie wiem kompletnie jak to zrobić żeby wchodziło tam co innego. Z tego co czytałam jakoś zrozumiałam, że w kolejnej sesji nowe dane dopiszą się pod poprzednimi. Gdyby z formularza korzystało dwie osoby z dwóch różnych miejsc jednocześnie? Jak w takim razie nadać odpowiednio klucze żeby informacje się nie nadpisywały? Jakoś dynamicznie?

Pozostało 580 znaków

2019-05-15 11:28
1

Nie wiem czy dobrze zrozumiałem, aczkolwiek każde localStorage jest przypisane do przeglądarki użytkownika i dostępne tylko dla niego (indywidualne). Także pod postacią 'name' w localStorage każdy będzie miał swoje dane.

Zgadza się, localstorage jest trzymany lokalnie w ramach przeglądarki, każdy user ma swoje. To coś w rodzaju pamięci podręcznej/schowka umieszczonego w przeglądarce - cerrato 2019-05-15 11:30

Pozostało 580 znaków

2019-05-15 11:29
2

Gdyby z formularza korzystało dwie osoby z dwóch różnych miejsc jednocześnie

No ale jeśli dwie osoby z dwóch miejsc jednocześnie, to będą miały inne komputery oraz inne przeglądarki, prawda? W związku z tym każda z nich będzie miała swojego localstorage. Pamiętaj, że localstorage jest trzymany nie na serwerze, ale lokalnie, po stronie użytkownika/przeglądarki.

"W standardzie HTML5 zdefiniowano jednolite dla wszystkich przeglądarek magazyny danych. Pozwalają one przechowywać informacje po stronie użytkownika" - https://magazynt3.pl/czym-jes[...]i-jak-je-wykorzystac-z-html5/ . Przeczytaj proszę ten artykuł, bo mam wrażenie, że nie do końca rozumiesz, o co chodzi, do czego służy i jak działa ten localstorage, z którego chcesz korzystać.


That game of life is hard to play
I'm gonna lose it anyway
The losing card I'll someday lay
So this is all I have to say
edytowany 1x, ostatnio: cerrato, 2019-05-15 11:36

Pozostało 580 znaków

2019-05-15 11:34
0

Tylko, że mój formularz będzie sprawdzany w jeden sieci z jednego komputera kilkukrotnie i ma pozwalać na zapis danych i odczyt. Chyba, że polecenie było źle ujęte i tak się nie da no to wtedy sprawa załatwiona.

Wydaje mi się, że zrozumiałam generalnie całość tematu i czytałam z pewnością to co wysłałeś. Po prostu sądziłam, że skoro mam tak sformułowane polecenie to muszę jakoś to obejść, żeby te dane wchodziły tam jeden po drugich niezależnie od tego ile osób z tego samego komputera i przeglądarki wypełni formularz.

Co do tego co wyrzuca mi sam alert po getItem z localStorage to zwraca mi puste okno.

Pozostało 580 znaków

2019-05-15 11:34
0

To może daj nam tutaj to polecenie/zadanie, które chcesz zrealizować. Bo albo ktoś je niepoprawnie zadał, albo Ty coś przekręciłaś ;)


That game of life is hard to play
I'm gonna lose it anyway
The losing card I'll someday lay
So this is all I have to say

Pozostało 580 znaków

2019-05-15 11:39
0

"Wybrane dane należy ponadto przechowywać w magazynie danych HTML5 (sessionStorage, localStorage) i umożliwiać ich przeglądanie oraz edytowanie."

Kiedy dopytałam jak to ma wyglądać to dostałam odpowiedź, że będzie po prostu sprawdzane jak 2-3 osoby wypełnią ankietę czy dane się tam znajdują i czy da się je pobrać.

Wtedy jeszcze nie znałam localStorage także nie zdziwiło mnie to xd

Pozostało 580 znaków

2019-05-15 11:45
4

Zawsze możesz inaczej do tego podejść, o ile dobrze Cię rozumiem :P Do localStorage pod zmienną możemy trzymać np. tablicę informacji albo obiekt. Jeżeli koniecznie potrzebujesz zapisywać każdy wypełniony formularz na jednym komputerze, po prostu zrób sobie tablicę i do niej pushuj każdy kolejny wypełniony formularz.
Po tym wszystkim nadpisuj set'em zaktualizowane dane w localStorage.

pamiętaj jeszcze o jednym - JSON.parse i JSON.stringify - przyda się ;)

https://alligator.io/js/intro[...]-localstorage-sessionstorage/

edytowany 4x, ostatnio: Kondziowsky, 2019-05-15 11:48
Jeszcze trochę czarna magia ale o ile działa ta tablica jak w C++ to się zrobi :) - Sandra 2019-05-15 11:47
Kluczem jest tu odpowiednie dobranie 'formy'. Czyli jak zapisywać efektywnie i zrozumiale te dane. Jeżeli nikt nie odpisze to zajrzę tutaj wieczorem i podpowiem więcej - Kondziowsky 2019-05-15 11:49

Pozostało 580 znaków

2019-05-15 12:05
2

Dobra, miałem chwilkę w sumie, więc tutaj masz przykład jak można to ugryźć:

var form = [];

var name = document.getElementById('imie').value;
var email = document.getElementById('email').value;
var recipe = document.getElementById('jakiprzepis').value;

form.push({imie: name, email: email, przepis: recipe});

localStorage.setItem("formularze", JSON.stringify(form));

var pokaz = JSON.parse(localStorage.getItem("formularze"));
console.log(pokaz);

Myślę, że możesz się na tym wzorować, aczkolwiek nie wiem czy całkowicie rozwiązuje Twoje zadanie.

edytowany 2x, ostatnio: Kondziowsky, 2019-05-15 12:06
Dziękuję :) już się za to zabieram - Sandra 2019-05-15 13:11

Pozostało 580 znaków

2019-05-15 12:23
1

Albo, biorąc pod uwagę umiejętności Sandry (bez urazy - po prostu stwierdzam fakt, że jesteś osobą raczej początkującą) można pewien półśrodek zastosować.

Zamiast wszystkie kolejne informacje, podawane w kolejnych "cyklach", zapisywać jako "name", zróbmy "name1", "name2", "name3" i tak dalej. Podczas odczytu sprawdzasz, czy jest "name1", jeśli jest to odczytujesz, a następnie sprawdzasz, czy istnieje "name2" i tak do chwili, w której okaże się, że danego klucza już nie znajdziesz. Analogicznie podczas zapisu - sprawdzasz po kolei, czy dany klucz istnieje, a jak dojdziesz do ostatniego (np. "name7") to zwiększasz licznik i nową treść wsadzasz w pole "name8". Wiem, że jest to nie-do-końca zgodne z dobrymi praktykami, ale starałem się dobrać odpowiedź do wiedzy pytającego. Nie wiem, czy zabawa z tablicami nie będzie na chwilę obecną zbyt trudna.


That game of life is hard to play
I'm gonna lose it anyway
The losing card I'll someday lay
So this is all I have to say
edytowany 1x, ostatnio: cerrato, 2019-05-15 12:24

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

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