session Storgeとlocastrageの使用09

session Storgeの使用
session Strage属性はsession Strageオブジェクトへのアクセスを許可します.これはlocal Strageと似ていますが、local Strageに格納されているデータは有効期限が過ぎていません.session Strageに格納されているデータはページセッション終了時に消去されます.ページセッションは、ブラウザが開いている間は維持されていますが、ページを再読み込みまたは再開しても元のページセッションを維持します.新しいタブまたはウィンドウでページを開くと、トップブラウザのコンテキストで新しいセッションを初期化します.これはセッションの実行方法と違います.
構文

//      sessionStorage
sessionStorage.setItem('key', 'value');

//  sessionStorage    
var data = sessionStorage.getItem('key');

//  sessionStorage       
sessionStorage.removeItem('key');

//  sessionStorage         
sessionStorage.clear();

例

//        
var field = document.getElementById("field");
 
//        autosave   
// (                 )
if (sessionStorage.getItem("autosave")) {
  //           
  field.value = sessionStorage.getItem("autosave");
}
 
//          change   
field.addEventListener("change", function() {
  //       sessionStorage    
  sessionStorage.setItem("autosave", field.value);
});

local Strageの使用
読み取り専用のlocal Strageは、Dockmentの遠端(orign)オブジェクトStorrageへのアクセスを許可します.データはブラウザ間セッションとして保存されます.local Strageはsession Strageに似ています.違いは、データがlocal Strageに格納されているのは無期限であり、ページセッションが終了したとき、つまりページが閉じられたときに、session Storrageにデータが格納されているのは消去されるということです.
構文

//  
localStorage.setItem('myCat', 'Tom')
//  
let cat = localStorage.getItem('myCat');
//  
localStorage.removeItem('myCat');
//     
localStorage.clear();

例

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;

  htmlElem.style.backgroundColor = '#' + currentColor;
  pElem.style.fontFamily = currentFont;
  imgElem.setAttribute('src', currentImage);
}