いまさらHTML5（Web StorageのlocalStorage編）

##はじめに

題名にHTML5と書いてはありますが、「Web Storage」ってHTML5から分離されてたんですねぇ
というわけで、タグからは一応「HTML5」を外しております。

[前回](http://qiita.com/tnakagawa/items/69be0fe53c830782bb8d)、[前々回](http://qiita.com/tnakagawa/items/b4a4160f13fcbcf66f83)の続きで、蓄えた履歴を保存してみます。

※：「localStorage」はローカルHTMLの場合、IEでは使用出来ないらしいです。（現在ソース検索中）

##localStorage

[W3C](https://www.w3.org/TR/webstorage/)の仕様を見てみます。

```text:IDL
interface Storage {
  readonly attribute unsigned long length;
  DOMString key(unsigned long index);
  getter DOMString getItem(DOMString key);
  setter void setItem(DOMString key, DOMString value);
  deleter void removeItem(DOMString key);
  void clear();
};
```

属性1つ、メソッドが５つという事がわかります。

| 属性名 | 概要 |
|:-----------|:------------|
| length | Storageの要素数を返します。 |


| メソッド名 | 概要 |
|:---------|:------------|
| key | 引数番目のキー名を返します、存在しない場合はnullを返ります。 |
| getItem | 引数のキー名に設定されている値を返します、キー名が存在しない場合はnullを返します。 |
| setItem | 引数のキー名に引数の値を設定します、すでにキー名が存在していた場合は、上書きされます。 |
| removeItem | 引数のキー名を削除します。Storageの要素数も減少します。 |
| clear| Storageの全ての要素を削除します。 |


##サンプル

```js
console.log("length:" + localStorage.length);
for (var i = 0; i < localStorage.length; i++) {
	console.log(localStorage.key(i) + "=" + localStorage.getItem(localStorage.key(i)));
}
```

現在設定されている要素を全て出力するサンプルです。

##実装

```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>メール作成</title>
	<style>
		* {font-family: monospace}
	</style>
	<script>
		var HISTORY_MAX = 5;
		var LOCALSTORAGE_KEY = "sample_localstorage_key_001";
		var hist = [];
		function init() {
			var value = JSON.parse(localStorage.getItem(LOCALSTORAGE_KEY));
			if (value) {
				hist = hist.concat(value);
				setOptions();
			}
			document.getElementById("createbtn").addEventListener("click", createEmail, true);
		}
		function createEmail() {
			var who = document.getElementById("who").value;
			if (who) {
				var tmp = [];
				tmp.push(who);
				for (var i = 0; i < hist.length; i++) {
					if (hist[i] !== who) {
						tmp.push(hist[i]);
					}
					if (tmp.length >= HISTORY_MAX) {
						break;
					}
				}
				hist = tmp;
				setOptions();
				localStorage.setItem(LOCALSTORAGE_KEY, JSON.stringify(hist));
			}
			document.getElementById("who").value = null;
		}
		function setOptions() {
			var element = document.getElementById("wholist");
			while (element.firstChild) { element.removeChild(element.firstChild); }
			for (var i = 0; i < hist.length; i++) {
				var option = document.createElement("option");
				option.setAttribute("value", hist[i]);
				element.appendChild(option);
			}
		}
		window.onload = init;
	</script>
</head>
<body>
	<table>
		<tr><td>誰？</td><td><input id="who" list="wholist" type="text" value="" size="50" />
		<datalist id="wholist"></datalist></td></tr>
		<tr><td colspan="2"<td><button id="createbtn">作成</button></td></tr>
	</table>
</body>
</html>
```

部分的に説明します。

```js
localStorage.setItem(LOCALSTORAGE_KEY, JSON.stringify(hist));
```
保存部分です、値をJSON文字列にして保存します。


```js
var value = JSON.parse(localStorage.getItem(LOCALSTORAGE_KEY));
if (value) {
	hist = hist.concat(value);
```

読み出し部分です、JSON文字列化してあったものをオブジェクトに直し、配列に入れなおしています。


##さいごに

思ったより簡単でした。
ただし、ローカルHTMLの場合「file://」でlocalStorageは1つとみなされるみたいで。
「clear」メソッドで全てが消えてしまいますので、注意が必要です。