html5 - How to store value in localstorage on button click using knockout js? -

this code when type text input box after click on save button text saving dropdown list text is't storing in local storage , m using knockout.js

 <form style="margin-top: -25px;">             <button id="buttonsave" type="submit" style="margin-left: 1156px;">save</button>           </form>      <div id="labellist" class="btn-group" style="margin-top: -595px;margin-left: 3px;">         <input id="editexistannotation" data-bind="value: annotationlist" class="editannotationlist textarea" type="text" placeholder="edit existing annotation"/>     <select data-bind="options: area"></select>      </div>  ----------------------------------------------------    var addhandle = function () {                 this.items = ko.observablearray();                 this.add = function (item) { this.items.push(item); }                 this.remove = function (item) { this.items.remove(item); }                 this.clear = function () { this.items.removeall(); }             }             var addhandler = new addhandle();             ko.applybindings(addhandler, document.getelementbyid("slider"));              $("#buttonsave").click(function () {                 var label_object;                 var labeltext = document.getelementbyid("textarealabel");                 var labelobject = new object();                 labelobject.textarealabel = labeltext.value;                 localstorage.setitem('label_object', json.stringify(labelobject));                 $("#ddllist").prepend("<option value='0'>" + localstorage.getitem(label_object) + "</option>");                 return false;             })  var existannotationmodel = new function () {                  var labelobject = $('#textarealabel').val();                 this.annotationlist = ko.observable();                 this.area = ko.observablearray();                 this.append = ko.computed(function () {                     this.area.push(this.annotationlist());                     localstorage.setitem('labelobject', json.stringify(labelobject));                 }, this);             }             ko.applybindings(existannotationmodel); 

now when type text input type="text" , click on button. text added options , local storage.

i remove non relevant code.

<form >     <button id="buttonsave" type="submit" data-bind="click:append" >save</button> </form> <div id="labellist" class="btn-group" >     <input id="editexistannotation" data-bind="value: annotationlist"  type="text" />     <select data-bind="options: area"></select> </div>  var vm  = function () {      this.annotationlist = ko.observable();     this.area = ko.observablearray();     this.append = function () {         this.area.push(this.annotationlist());         localstorage.setitem('labelobject',this.annotationlist());         localstorage.setitem('labelobjectlist',this.area());     }; };  var existannotationmodel = new vm();  ko.applybindings(existannotationmodel); 

see fiddle