Question

我正在尝试使用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);

Traget：在文本框中输入的数据应该在localStorage中可用。

Answer 1

您需要定义一个Handler函数来从Textbox中读取数据并将其保存到localstorage. 您需要引用绑定到click事件的Data，可以使用第一个参数。 Knockout将数据和事件信息作为click处理函数的2个参数传递。因此，您可以使用单击绑定将事件处理程序添加到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不起作用，但它应该在您的代码中有效。我在控制台中添加了一行来获取Store的值。

＆＃13;

var dataModel = {
    myData: ko.observable('new'),

    dataTemplate: function (myData) {
        var self = this;
        self.myData = ko.observable(myData);
    },
    
    saveToLocalStorage : function(data){
         var datatoStore = JSON.stringify(data.trialData().map(x=>x.myData()));
         console.log(datatoStore);
         localStorage.setItem("TextBoxValue", datatoStore);
         
    }
};

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);

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<form data-bind="foreach: trialData">
    <input type="text" name="name" data-bind="textInput: myData"><br>
</form>
<button data-bind="click:saveToLocalStorage">Save To local storage</button>

＆＃13;

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

1 个答案: