Local storage - problem z zapisem danych z formularza

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);
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/en-US/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.

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/en-US/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?

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.

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-jest-localstorage-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ć.

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.

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ś ;)

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

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/introduction-localstorage-sessionstorage/

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.

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.

1

@cerrato umiem pracować na tablicach :) tyle tylko, że w innym języku. Tutaj składnia jest kompletnie inna więc napisałam "czarna magia" bo musiałam w ogóle zapoznać się z tablicami w JS :) ale w C++ nie ma dla mnie problemu z takimi rzeczami :) także to tylko o składnię chodziło :) JS uczę się jakoś od tygodnia ;)

1

JS uczę się jakoś od tygodnia

Ale robisz to w fajny sposób. Czasami trafiają się totalnie nieogarnięte osoby, które zupełnie nie czają o co w tym chodzi. Tłumaczy się takiemu, ale nic nie dociera. Z Tobą jest lepiej, widać że rozumiesz co się Tobie tłumaczy :)

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