[HTML5]Web Storageを試す（sessionStorage/localStorage）

ブラウザ使ったデータ保存の方法って、昔ながらのクッキーしか知らなかった。

今は、Web Storageという仕組みが使えるらしいので検証してみる。

1オリジン当たり5MBまで保存できるって・・・すげーな。

詳しい仕様の方は、こちらのサイトで勉強させて貰ってます。

ここでは自分の理解の為に試しに書いて検証していきます。

１．Web Storageには２種類あるらしい。

sessionStorage - 「ウィンドウを閉じるまで有効」
localStorage - 「永続的に有効」

それぞれの動きを確認していきましょう。

sessionStorage

検証内容

テキスト入力して「セーブ」
テキスト内容をさらに更新して「ロード」
⇒「セーブ」した時の内容が復元。
F5でページリフレッシュして、「ロード」
⇒「セーブ」した時の内容が復元。
画面を閉じて、もっかい開いて「ロード」
⇒何もでない。

コード

var sessionStg = sessionStorage;

function sessionStgSave(){
  let val = document.getElementById('sessionStgText').value;
  sessionStg.setItem('sessionStgTextVal', val);
}
function sessionStgLoad(){
  let val = sessionStg.getItem('sessionStgTextVal');
  document.getElementById('sessionStgText').value = val;
}
function sessionStgRemv(){
  sessionStg.removeItem('sessionStgTextVal');
}
function sessionClear(){
  sessionStg.clear();
}

var sessionStg = sessionStorage;

function sessionStgSave(){

let val = document.getElementById('sessionStgText').value;

sessionStg.setItem('sessionStgTextVal', val);

}

function sessionStgLoad(){

let val = sessionStg.getItem('sessionStgTextVal');

document.getElementById('sessionStgText').value = val;

}

function sessionStgRemv(){

sessionStg.removeItem('sessionStgTextVal');

}

function sessionClear(){

sessionStg.clear();

}

localStorage

検証内容

テキスト入力して「セーブ」
テキスト内容をさらに更新して「ロード」
⇒「セーブ」した時の内容が復元。
F5でページリフレッシュして、「ロード」
⇒「セーブ」した時の内容が復元。
画面を閉じて、もっかい開いて「ロード」
⇒「セーブ」した時の内容が復元。

コード

var localStg = localStorage;

function localStgSave(){
  let val = document.getElementById('localStgText').value;
  localStg.setItem('localStgTextVal', val);
}
function localStgLoad(){
  let val = localStg.getItem('localStgTextVal');
  document.getElementById('localStgText').value = val;
}
function localStgRemv(){
  localStg.removeItem('localStgTextVal');
}
function localClear(){
  localStg.clear();
}

var localStg = localStorage;

function localStgSave(){

let val = document.getElementById('localStgText').value;

localStg.setItem('localStgTextVal', val);

}

function localStgLoad(){

let val = localStg.getItem('localStgTextVal');

document.getElementById('localStgText').value = val;

}

function localStgRemv(){

localStg.removeItem('localStgTextVal');

}

function localClear(){

localStg.clear();

}

ナニコレ、全然簡単で便利で大容量ってすごいじゃない。
今後作るフォームにはどんどん使ってこう。