戻るボタンで入力内容を復元する一番簡単な方法

公開日:2014/10/31

戻るボタンを判定して入力内容を復元する方法の続き。
戻るボタン判定も入力内容の復元も複数タブ対応もHistory APIだけで足りることに気づいたのでメモする。

stateオブジェクト

前回はHistory APIのstateプロパティを目印にしてWeb Storageから入力内容を復元したけどもっと簡単な方法があることに気づいた。
stateプロパティはオブジェクトだった( ﾟдﾟ)
なんてこった。入力フォームの内容を1つの配列にしてつっこんだらいけるんじゃないか。

入力ページ。

window.onload = function(){
	if(history.state!=null){
		cache = history.state;
		document.getElementById('test1').value = cache[0];
		document.getElementById('test2').value = cache[1];
	}
}

window.onunload = function(){
	var cache = [];
	cache.push(document.getElementById('test1').value);
	cache.push(document.getElementById('test2').value);
	history.replaceState(cache,null);
}

動いた( ﾟдﾟ)
入力内容を履歴に直接格納することができた。
さらばWeb Storage。
問題は入力ページで記憶するから更新ボタンを押してもURLを打ち直しても入力内容がリセットされないことくらい。
んーリセットボタン置けばいいか(:3_ヽ)_