Zapisywanie na stronie zmian przez JavaScript

pytanie zadane 20 listopada 2016 w JavaScript przez Giovacho Użytkownik (960 p.)

Witam,

Mam problem więc zgłaszam się do mojego ulubionego forum pana Mirosława. No ale do rzeczy. Napisałem prosty skrypt w JavaScript (Jestem początkujący w js), który pobiera dane z 4 inputów i dodaje je na stronę na zasadzie znaczników <details> i <summary>. Wszystko działa jak chciałem tylko, że jak odświeżam stronę to to co zostało dodane znika i chciałbym się dowiedzieć jak sprawić aby te dane zapisywały się na zawsze, żeby kod się zmieniał. Kod poniżej

<!DOCTYPE HTML>
<html>
    <head>
	
    </head>
    
    <body>
 
                <div class="text_tests">
					Temat&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" class="inputsummary" ></input></br>
					Podpunkt 1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" class="inputtresc"></input></br>
					Podpunkt 2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" class="inputtresc2"></input></br>
					Podpunkt 3&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" class="inputtresc3"></input></br>
					Podpunkt 4&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" class="inputtresc4"></input>
					<input type="button" class="inputbutton" value="Add"></input>
                    <details>
                        <summary title="Click!"><b>&nbsp;Przykładowy Tekst Temat</b></summary>
                        <a>
                            &nbsp;&nbsp;&nbsp;&nbsp;-&nbsp;Podpunkt 1<br>
                            &nbsp;&nbsp;&nbsp;&nbsp;-&nbsp;Podpunkt 2<br>
                            &nbsp;&nbsp;&nbsp;&nbsp;-&nbsp;Podpunkt 3
                        </a>
                    </details>


	   <script>
			var addBtn = document.querySelector(".inputbutton");
			addBtn.addEventListener("click", function(){
				
				var tagA = document.createElement("a");
				tagA.className = 'text_tests_stuff';
				var details = document.createElement("details");
				var summary = document.createElement("summary");
				summary.className = 'text_tests_title';
				var texttests = document.querySelector(".text_tests");
				var inputsummary = document.querySelector(".inputsummary");
				
				var inputtresc = document.querySelector(".inputtresc");
				var inputtresc2 = document.querySelector(".inputtresc2");
				var inputtresc3 = document.querySelector(".inputtresc3");
				var inputtresc4 = document.querySelector(".inputtresc4");
				
				summary.innerHTML = '&nbsp;' + inputsummary.value;
				tagA.innerHTML = '&nbsp;&nbsp;&nbsp;&nbsp;-&nbsp;' + inputtresc.value + '</br>' + '&nbsp;&nbsp;&nbsp;&nbsp;-&nbsp;' + inputtresc2.value + '</br>' + '&nbsp;&nbsp;&nbsp;&nbsp;-&nbsp;' + inputtresc3.value + '</br>'  + '&nbsp;&nbsp;&nbsp;&nbsp;-&nbsp;' + inputtresc4.value;
				
				
				texttests.appendChild(details);
				
				details.appendChild(summary);
				
				details.appendChild(tagA);
				
				
				
			}, false);
	   
	   </script>
    </body>    
</html>

3 odpowiedzi

odpowiedź 30 stycznia 2017 przez Tomek Sochacki Ekspert (227,510 p.)
wybrane 30 stycznia 2017 przez Giovacho

Najlepsza

a co chcesz osiągnąć przez takie zapamiętywanie? Generalnie to takie rzeczy robi się poprzez przesłanie danych z inputów do serwerka i tam dodaje się np. do bazy danych. Przy wczytywaniu strony możesz weryfikować wtedy dane i pobierać albo zawsze najnowsze albo np. dedykowane dla konkretnego usera itp.

W kwestii komunikacji klient-serwer polecam poczytać o tzw. ajaxie, na początek myślę że w oparciu o XMLHttpRequest (wiem, że niektórzy od razu napiszą, że są lepsze metody wprowadzone np. w Ecma 6 ale XHR jest na tyle banalny, że jako początkujący łatwo go zrozumiesz a i w necie jest mnóstwo tutoriali).

odpowiedź 20 listopada 2016 przez kubaapk Nałogowiec (44,270 p.)

odpowiedź 20 listopada 2016 przez Maciek Gamrot Bywalec (2,830 p.)

Najlepszą metodą jest używanie plików cookies. Poczytaj o tym tutaj:

http://wszystkoociasteczkach.pl/po-co-sa-ciasteczka/

http://www.w3schools.com/js/js_cookies.asp

Po stworzeniu plików cookies zrób żeby za każdym razem w wybrane miejsca były wstawiane te dane podczas ładowania strony (za pomocą JS).

1	komentarz 20 listopada 2016 przez Maciek Gamrot Bywalec (2,830 p.) I postaraj się wstawiając tutaj kod zrobić go prostym do czytania. Przez te"&nbsp" jest on nie czytelny