ブラウザにデータを保存する仕組み。
ブラウザを閉じてもデータが保持される。
使用例(JSFiddleで動作確認)
<!DOCTYPE html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script language="javascript" type="text/javascript">
// 読込
function load() {
var varinVal = "";
if(!localStorage.getItem('hogeKey')) {
varinVal = "データがありません";
} else {
//ローカルストレージからキー「hogeKey」の値を取得
varinVal = localStorage.getItem('hogeKey');
}
//「hogeKey」で取得した値を表示エリアにセット
document.getElementById("outHoge").innerHTML = varinVal;
}
// 保存
function save() {
//テキストボックスの値を取得
var varinVal = document.getElementById("inVal").value;
//キー「hogeKey」でローカルストレージに保存
localStorage.setItem('hogeKey', varinVal);
}
</script>
</head>
<body>
localStrageに保存する値を入力して下さい<br/>
<input name="inVal" id="inVal" type="text" value="" />
<br />
<input type="button" value="Load" onclick="load();"/>
<input type="button" value="Save" onclick="save();"/>
<br /><br />
<div id="outHoge"></div>
</body>
</html>
