Functional JavaScript set local-storage [duplicate]

Question

I came to a point where I move really comfortable within Vanilla JS when it comes to Procedural programming, so I jumped into Functional programming to widen my knowledge and get ready for the next level of Javascript usage...

Well, it took like 3 minutes to get to my first unwanted encounter were saving to the local store not exactly working as I planned.

The app would simply add userInput.value to the local-storage when the button is clicked. What happens is it adds to the empty local-store. Fine. Then when the user tries to add again this is the result

.

Here is the full code, there is only one userInput.value and a button to trigger

//////////////////////////////////////////////////////
// Functional programmed version:
//////////////////////////////////////////////////////

function getStorageData() {
    return localStorage.getItem('itemsArray') || [];
}
function setStorageData(obj) {
    return localStorage.setItem('itemsArray', JSON.stringify(obj));
}

function getUserInput(input) {
    return document.querySelector(input).value;
}

function addToStorage(userInput) {
    return setStorageData({...getStorageData(), userInput});
}

function submitHandler(event) {
    event.preventDefault();
    addToStorage(getUserInput('input'));
}

function connectForm(button, submit) {
    const addBtn = document.querySelector(button);
    addBtn.addEventListener('click', submit);
}

connectForm('.add-btn', submitHandler)

A problem I see the app tries to put it as an object like {userInput: value} instead just value so it probably breaking on adding the same object with a different value... How can I get rid of the variable here? It seemingly puts the variable there automatically.

Thanks for all help in advance!

You are ...[] an array into an object. Seems like a problem — Taplar
– Taplar, Commented Dec 23, 2020 at 17:33
I had JSON.parse() originally but i got: Unexpected end of JSON input every time. Also if it had an initial value I got an Unexpected o of JSON input on pos 1... — Nex
– Nex, Commented Dec 23, 2020 at 17:37
None of these functions follow the functional programming paradigm. They all have side effects or depend on global state (the DOM). This still looks like imperative programming, just with lots of well-separated units. — Bergi
– Bergi, Commented Dec 23, 2020 at 17:39

HymnZzy · Accepted Answer · 2020-12-23 17:42:42Z

1

Here's what you need to do ..

function getStorageData() {
    return JSON.parse(localStorage.getItem('itemsArray') || '[]'); // load the array filled or empty
}

function setStorageData(obj) {
    localStorage.setItem('itemsArray', JSON.stringify(obj)); // nothing to return here
}

function getUserInput(input) {
    return document.querySelector(input).value; // this return purely a value and not a JSON object.
}

function addToStorage(userInput) {
    setStorageData([...getStorageData(), userInput]); // you are changing an array into a JSON object here, and also nothing to return here.
}

others are fine.

answered Dec 23, 2020 at 17:42

HymnZzy

2,9351 gold badge21 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nex Over a year ago

In the meantime, I managed to solve and finish the list as a whole. addToStorage iterate into an array instead of an object was an issue, the other one was getStorageData() { return JSON.parse(localStorage.getItem('itemsArray')) || '[]'; } Only local storage should be parsed.

HymnZzy Over a year ago

No. If localStorage is not set, you'll get a JSON.parse error.

Collectives™ on Stack Overflow

Functional JavaScript set local-storage [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related