javascript — ошибка с добавлением элемента в выпадающее меню (локальное хранилище)

У меня есть следующий код, который хорошо работает.

<div style="padding:2px;">
<form action='test.php' name ='gen' method='post'>
<input type='text' name='pass' placeholder="Insert website" size="10">&nbsp;<input type='submit' value='Open'>
</form>
</div>
<?php
$random = 'specificsaltcode'; // specific salt
$pass2  = $_POST['pass'] . $random; // add it to user input
$pass   = md5($pass2); // md5() both
$url    = 'http://www.website'.$_POST['pass'].'random'.$pass.'randomurlcontinued'; // the url you need

echo '<iframe id="iframe1" name="iframe1" scrolling="yes" src="' . $url . '" style="position: absolute; left: 0px; top: 26px;" width="99%" height="88%" border="0"></iframe>';
?>

Это хэширует пользовательскую строку ввода и отправляет исходную строку ввода вместе с хешированным номером в iframe в качестве URL. Это хорошо работает для меня.

Однако вместо того, чтобы отправлять URL-адрес в iframe, мне нужно отправить его в раскрывающийся список и сохранить его в локальном хранилище.

У меня есть следующий код для моего раскрывающегося списка.

<style>
#choice option { color: black; }
.empty { color: gray; }
</style>
<script>
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);
</script>
<script>
$("#choice").change(function () {
if($(this).val() == "0") $(this).addClass("empty");
else $(this).removeClass("empty")
});
$("#choice").change();
</script>

<form >
<span class="btn-group">
<select name="select" data-bind="options: area" id="choice">
<option value="0" selected="selected">Choose     website</option>
</select>
<input id="editExistannotation" data-bind="value:     annotationList"  type="text" placeholder="Enter website"/>
</span>
<button id="buttonSave" type="submit"     data-bind="click:append" >Save</button>
</form>
<div id="labelList" class="btn-group" ></div>

Однако этот выпадающий метод НЕ хранит эти добавления. Infact, он даже не добавляет никаких пунктов в меню вообще. Я бы хотел добавить элемент в выпадающий список и сохранить его с помощью локального хранилища, поэтому, когда пользователь обновляет страницу, добавления все еще там.

Итак, две проблемы, как передать URL в выпадающий список и как сделать, чтобы выпадающий список сохранял добавленные элементы.

Кроме того, меня сейчас не волнуют вопросы безопасности.