功能性JavaScript设置本地存储[重复]

Question

当谈到过程式编程时，我在 Vanilla JS 中非常适应，所以我跳入函数式编程以扩大我的知识并为下一个级别的 Javascript 使用做好准备...

嗯，我花了大约 3 分钟才到达我第一次不想要的遭遇，因为保存到本地商店并没有完全按照我的计划工作。

当点击按钮时，应用程序会简单地将userInput.value 添加到本地存储中。 发生的事情是它添加到空的本地商店。美好的。 然后当用户再次尝试添加时，结果就是这样

.

这里是完整代码，只有一个userInput.value和一个button可以触发

//////////////////////////////////////////////////////
// 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)

一个问题我看到应用程序试图将其作为{userInput: value} 之类的对象而不是value 所以它可能会在添加具有不同值的相同对象时中断...我怎样才能在这里摆脱变量?它似乎自动将变量放在那里。

提前感谢所有帮助！

Answer 1

这就是你需要做的事情..

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.
}

其他都很好。