localStorageを使ってみました。

　千里の道も一歩から！　今はまったく使い物にならない『URL NOTE』ですが、少しずつ良いものにしていければなあと思っています。
　さて、今日はlocalStorageにURLを保存できるようにしてみました。昨日のコードではいちいちソースコードをいじってURLを追加しなくてはなりませんでしたが、これで拡張機能のポップアップからURLを追加できるようになりました！　ほんの少しだけ便利になりましたね！

　これが実際に動かしてみた図です。テキストバーにURLを入力して『URLを追加』ボタンを押せばURLが追加できる仕組みです。

　以下はコードです。

<style>
body{
	min-height:300px;
	min-width:500px;
}

ul{
	padding:0px;
}

li{
	list-style-type:none;
	margin:0px;
}

#eraseURL{
	margin-right:100px;
}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
	$(function(){
		try{
			_urlList = JSON.parse(localStorage['urlList']);
			displayUrl();
		}catch(e){
			_urlList = new Array();
			alert(e);
		}
	
		$("#addUrl").click(function(){
			_urlList.push($("#Url").val());
			localStorage.urlList = JSON.stringify(_urlList);
			location.reload();
		});
		
		$("#eraseURL").click(function(){
			_urlList = new Array();
			localStorage.urlList = JSON.stringify(_urlList);
			location.reload()
		});
		
	});
	
	function displayUrl(){
		jQuery.each(_urlList,function(){
			var a = document.createElement("li");
			a.innerHTML = this;
			$('#UL').append(a);
		});
	}
</script>

<input type="text" id="Url" size="60" />
<input type="button" id="addUrl" value="URLを追加" />

<ul id="UL">

</ul>

<input type="button" id="eraseURL" value="URLを消去" />

　今後の修正点としては、

1. いちいちURLを手入力するのはタルいので、今居るページのURLをテキストバーにデフォルトで表示できるようにする。
2. 一件ごとにURLを消去できるようにする。
3. クリックでURLをハイライト。

　あたりを考えています。