formularz i wysyłka do localStorage

Witam!

Chciałem sobie zapamiętać wartość wpisywaną doi formularza w localstorage i robię coś takiego:

<form id="dane">
   <ul>
    <li>
         <label for="alfa2">kąt wypływającego strumienia: </label>
         <input name="alfa2" id="alfa2" autofocus type="number" step="0.01" min="0" max="360" required>[&#176;]
        </li>
        <li>
    <button id="guzik" type="submit" onclick="zapamietajDane()">oblicz i wykreśl</button>
    </li>
  </form>

oraz JS do tego:

 
function zapamietajDane()
{
	var alfa2 = document.getElementById('alfa2');
	localStorage.setItem(alfa2);
	console.log(alfa2);
	alert(alfa2);
}
 
// Funkcja: init
// wykonywana po zakończeniu wczytywania strony WWW.
// dodaje procedurę obsługi zdarzenia do formularza.
function init()
{
	'use strict';
 
    // sprawdzanie czy można urzyć document.getElementById():
    if (document && document.getElementById)
	{
	var guzikDanych = document.getElementById('guzik');
	guzikDanych.onsubmit = zapamietajDane;
    }
 
} // Koniec funkcji init().
 
// Przypisz procedurę obsługi zdarzenia do okna przeglądarki:
window.onload = init;

Teraz pytanie: dlaczego to nie działa (znaczy ani nie loguje do konsoli, ani alertu nie pokazuje ani nie zapamiętuje w localstorage) ???

Metoda .setItem przyjmuje dwa parametry - klucz i wartość jaką chcesz pod niego wrzucić.
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage

Czyli np.

localStorage.setItem("alfa2", alfa2);

Przy czym, nie jestem pewien czy chcesz tam zapisać referencje do obiektu. Inaczej - nie powinieneś tam zapisywać referencji do obiektu, ponieważ:

1. Nie ma to sensu (po przeładowaniu strony referencja przestała by mieć sens, bo obiekt by został zniszczony i zastąpiony innym).
2. Jest to niemożliwe, bo afair localStorage i tak przechowuje tylko stringi, więc reference zostanie przerobiony na string "[object HTMLInputElement]" (tak, to jest string).

Zamiast tego raczej chcesz:

    var alfa2 = document.getElementById('alfa2').value;
    localStorage.setItem("alfa2", alfa2);
    console.log(alfa2);
    alert(alfa2);

Przy czym przy odczycie z localStorage pamiętaj żeby tego string sobie skonwertować na number ponownie.

Gynvael Coldwind napisał(a):

Metoda .setItem przyjmuje dwa parametry - klucz i wartość jaką chcesz pod niego wrzucić.
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage

Czyli np.

localStorage.setItem("alfa2", alfa2);

Przy czym, nie jestem pewien czy chcesz tam zapisać referencje do obiektu. Inaczej - nie powinieneś tam zapisywać referencji do obiektu, ponieważ:

1. Nie ma to sensu (po przeładowaniu strony referencja przestała by mieć sens, bo obiekt by został zniszczony i zastąpiony innym).
2. Jest to niemożliwe, bo afair localStorage i tak przechowuje tylko stringi, więc reference zostanie przerobiony na string "[object HTMLInputElement]" (tak, to jest string).

Zamiast tego raczej chcesz:

    var alfa2 = document.getElementById('alfa2').value;
    localStorage.setItem("alfa2", alfa2);
    console.log(alfa2);
    alert(alfa2);

Przy czym przy odczycie z localStorage pamiętaj żeby tego string sobie skonwertować na number ponownie.

Wszystko ładnie pieknie, ale problem raczej leży gdzie indziej, bowiem coś mi onclick nie chce działać.
Dla ułatwienia: http://jsfiddle.net/Gregorius/ar506g4s/

Hmm, testowałem ten kod który dałeś w pierwszym poście z poprawkami. Alert się nie pokazywał przez exception "setItem przyjmuje 2 parametry, podano 1".
Również w jsfiddle który podałeś po naniesieniu poprawek o których pisałem wszystko chodzi OK.

Na pewno przeczytałeś całego mojego posta? :)

EDIT: Sprawdzę jeszcze w FF/IE i updatene posta.
EDIT2: Zarówno w FF jak i IE działa OK z poprawkami o których pisałem.

Gynvael Coldwind napisał(a):

Hmm, testowałem ten kod który dałeś w pierwszym poście z poprawkami. Alert się nie pokazywał przez exception "setItem przyjmuje 2 parametry, podano 1".
Również w jsfiddle który podałeś po naniesieniu poprawek o których pisałem wszystko chodzi OK.

Na pewno przeczytałeś całego mojego posta? :)

EDIT: Sprawdzę jeszcze w FF/IE i updatene posta.
EDIT2: Zarówno w FF jak i IE działa OK z poprawkami o których pisałem.

No miałeś jednak rację, zmylił mnie kod źródłowy tej stronki: http://people.w3.org/mike/localstorage.html
Ona działa cho przy metodach localstorage nie używa pary key,value

Śmiem się nie zgodzić ;)

Cytując kod tej strony:

     function doSetItem() {
       var name = document.forms.editor.name.value;
       var data = document.forms.editor.data.value;
       localStorage.setItem(name, data);
       doShowAll();
     }

Jest to jedyne wywołanie localStorage.setItem w tym kodzie i jest w nim key (name) i value (data).

Anyway, cieszę się, że kod zadziałał :)

No tak w wieku lat 40 to już chyba czas na okulary ;)

Gynvael Coldwind napisał(a):

Przy czym przy odczycie z localStorage pamiętaj żeby tego string sobie skonwertować na number ponownie.

Jak? poprze JSOn.parse ?

var num = parseInt(my_string);