HTMLにデータを格納する方法

HTML 5は、クライアントにデータを格納する2つの新しい方法を提供します.
1』localStorage:時間制限のないデータストレージ
2』sessionStorage:1つのsessionに対するデータストレージ
localStorageプロパティを使用すると、Storageオブジェクトにアクセスできます.localStorageはsessionStorageと似ていますが、localStorageに格納されているデータは期限切れではなく、sessionStorageに格納されているデータはブラウザセッションの終了時に消去されます.つまり、ブラウザが閉じるときです.
localStorage.setItem()は、Storageインタフェースのメソッドとして、キー名と値をパラメータとして受け入れ、キー名が既に存在する場合に対応する値を更新するストレージにキー名を追加します.

function Storage() {
  localStorage.setItem('bgcolor', 'red');
  localStorage.setItem('font', 'Helvetica');
  localStorage.setItem('image', 'myCat.png');
}

 localStorage.getItem()は、Storageインタフェースのメソッドとして、パラメータとしてキー名を受け入れ、対応するキー名の値を返します.
getElementById()メソッドは、指定されたIDを持つ最初のオブジェクトへの参照を返します.

function setStyles() {
  var currentColor = localStorage.getItem('bgcolor');
  var currentFont = localStorage.getItem('font');
  var currentImage = localStorage.getItem('image');
  document.getElementById('bgcolor').value = currentColor;
  document.getElementById('font').value = currentFont;
  document.getElementById('image').value = currentImage;
}

localStorageインタフェースのremoveItem()メソッドは、キー名をパラメータとして受け入れ、そのキー名をストレージから削除します.

function populateStorage() {
  localStorage.setItem('bgcolor', 'red');
  localStorage.setItem('font', 'Helvetica');
  localStorage.setItem('image', 'myCat.png');
  localStorage.removeItem('image');
}