LocalStorage

Question

Cześć, mam taką aplikację,

https://codepen.io/anon/pen/KXdRLL

i chcę zapisać wszystkie divy, czyli te, które powstają po wpisaniu czegos w pole tekstowe i klikniecie ADD, pozniej w liscie on sie pojawia.

Znalazłem coś takiego localStorage.setItem('nazwa', 'Przykładowa wartość'); ale nie wiem jak tutaj odnieść się do tych divow

Answer 1

Tylko zauważ, że Ciebie de facto interesuje zapisanie wyłącznie treści węzłów <p> w div o klasie list-item. Pobierz więc sobie te węzły tekstowe, a dokładniej ich wartość (np. textContent dla <p>) i to zapisuj do localStorage np. z kluczami w formie indeksów kolejnych pozycji na liście.

Możesz to zrobić na dwa sposoby. Albo dodawać kolejne wpisy i potem przelatywać przez localStorage, albo tworzyć jeden duży obiekt lub tablicę zawierający wszystkie treści. Wymagałoby to jednak za każdym razem sparsowania stringa i ponownego użycia JSON.stringify. Pytanie co będzie dla Ciebie wygodniejsze i jak częste będą odwołania do localStorage.

A dodatkowo masz jeszcze inne opcje, np. IndexedDB :)

Answer 2

W localStorage możesz przechowywać tylko stringi (nie jestem pewny co do number), ale możesz zapisać wszystkie treści w tablicy, a potem ją przerzucić na stringa przy pomocy JSON.stringify. Następnie zapisać w lolcaStorage pod jakąś tam nazwą. Gdy będziesz potrzebował tych elementów to pobierasz z localStorage i zamieniasz stringa na tablice przy pomocy JSON.parse

Comments

localStorage.setItem('x', 5); 

localStorage.getItem('x'); //"5"

Właśnie na szybko sobie sprawdzałem w Chrome i zwrotnie dostajemy string, więc setItem w tym wypadku prawdopodobnie w tle wykonało toString na typie number. Uważałbym jednak z takim zachowaniem... myślę, że najbezpieczniej świadomie ładować string do localStorage i nie polegać na "automatach".

 

---

A może getItem zwraca stringa :)

https://developer.mozilla.org/en-US/docs/Web/API/Storage/getItem

Return value

A DOMString containing the value of the key. If the key does not exist, null is returned

Każdy obiekt Storage powinien zawierać klucz i wartość jako string:

Each Storage object provides access to a list of key/value pairs, which are sometimes called items. Keys are strings. Any string (including the empty string) is a valid key. Values are similarly strings.

Each Storage object is associated with a list of key/value pairs when it is created(...)