函数式JavaScript集本地存储

当涉及到过程编程时，我在Vanilla JS中非常自如，因此我跳入函数式编程以拓宽知识面，并为下一个Javascript使用级别做好准备

嗯，我花了大约3分钟的时间才找到我第一次不想要的邂逅。我们把钱存到了当地的商店，但并没有完全按照我的计划工作

单击按钮时，应用程序只需将

userInput.value

添加到本地存储。 发生的情况是，它将添加到空的本地存储中。好的 然后，当用户再次尝试添加时，这就是结果

这是完整的代码，只有一个

userInput.value

和一个

按钮要触发

//////////////////////////////////////////////////////
//功能编程版本：
//////////////////////////////////////////////////////
函数getStorageData（）{
返回localStorage.getItem（'itemsArray'）| |[]；
}
功能设置存储数据（obj）{
返回localStorage.setItem（'itemsArray'，JSON.stringify（obj））；
}
函数getUserInput（输入）{
返回文档.querySelector（输入）.value；
}
函数addToStorage（用户输入）{
返回setStorageData（{…getStorageData（），userInput}）；
}
函数submitHandler（事件）{
event.preventDefault（）；
addToStorage（getUserInput（'input'））；
}
功能连接表单（按钮，提交）{
const addBtn=document.querySelector（按钮）；
addBtn.addEventListener（'单击'，提交）；
}
connectForm（'.add btn'，submitHandler）

我看到的一个问题是，应用程序试图将其作为一个对象，比如
{userInput:value}
，而只是
value
，因此它可能会在添加具有不同值的相同对象时崩溃。。。我怎样才能去掉这里的变量？它似乎自动地将变量放在那里

提前谢谢大家的帮助
 以下是您需要做的

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

其他人都很好。
您是
…[]
对象中的数组。似乎是个问题所有的setter都返回unfinedal，所以你需要调用
JSON.parse（）
我本来有JSON.parse（），但每次都会得到：意外的JSON输入结束。另外，如果它有一个初始值，我在pos 1上得到了一个意外的JSON输入o…这些函数都没有遵循函数编程范式。它们都有副作用或依赖于全局状态（DOM）。这看起来仍然像是命令式编程，只是有很多分离良好的单元。同时，我设法解决并完成了整个列表。addToStorage迭代到数组而不是对象是一个问题，另一个问题是
getStorageData（）{return JSON.parse（localStorage.getItem（'itemsArray'））| | |'[]}
只应分析本地存储。否。如果未设置
localStorage
，则会出现JSON.parse错误。