Javascript 使用一个可观察数组删除多个动态文本框

我正在尝试使用knockout JS将文本框中的数据保存到localStorage！然而，我是新来的，无法理解这个特定的场景。该字段具有相同的可观察名称！请在下面找到我的代码

HTML代码：

<form data-bind="foreach: trialData">
    <input type="text" name="name" data-bind="textInput: myData"><br>
</form>

JS代码：

var dataModel = {
    myData: ko.observable('new'),

    dataTemplate: function (myData) {
        var self = this;
        self.myData = ko.observable(myData);
    }
};

dataModel.collectedNotes = function () {
    var self = this;
    self.trialData = ko.observableArray([]);
    for (var i=0; i<5; i++) {
        self.trialData.push (new dataModel.dataTemplate());
    }
};
dataModel.collectedNotes();
ko.applyBindings(dataModel);

var数据模型={
myData:ko.可观察（“新”），
dataTemplate:函数（myData）{
var self=这个；
self.myData=ko.可观察（myData）；
}
};
dataModel.collectedNotes=函数（）{
var self=这个；
self.trialData=ko.observearray（[]）；
对于（var i=0；i您需要定义一个处理函数，从文本框中读取数据并将其保存到
本地存储。
您需要引用绑定到单击事件的数据，可以使用第一个参数访问该事件。。Knockout将数据和事件信息作为两个参数传递给
click
handler函数。因此，您可以使用单击绑定将事件处理程序添加到viewModel中，然后展开该值并将其保存到localStorage

saveToLocalStorage : function(data){
         var datatoStore = JSON.stringify(data.trialData().map(x=>x.myData()));
         console.log(datatoStore);
         localStorage.setItem("TextBoxValue", datatoStore);

    }

完整代码：请注意，由于这是一个沙盒环境（在StackOverflow上运行此js代码段），localStorage不起作用，但它应该在您的代码中起作用。我在控制台中添加了一行代码来获取要存储的值


var数据模型={
myData:ko.可观察（“新”），
dataTemplate:函数（myData）{
var self=这个；
self.myData=ko.可观察（myData）；
},
saveToLocalStorage:函数（数据）{
var datatoStore=JSON.stringify（data.trialData（）.map（x=>x.myData（））；
console.log（datatoStore）；
setItem（“TextBoxValue”，datatoStore）；
}
};
dataModel.collectedNotes=函数（）{
var self=这个；
self.trialData=ko.observearray（[]）；
对于（var i=0；我可以使用敲除订阅方法实现同样的效果。是否可以消除单击功能！是的，这是可能的。我一直在尝试将值返回到输入框中。不幸的是，我无法。是否有办法“localStorage.getItem”所有的值都返回到输入字段。请帮助。发布您的代码，什么不起作用？您需要使用
localStorage.getitem
方法，然后使用
JSON.parse
方法将字符串转换为JSON。我可以从localStorage获取并设置变量。但是，当尝试使用多个输入框时，我有点困惑如何在localStorage中获取和设置数据。（所有输入字段都是动态生成的；例如，我输入了三个输入字段）