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

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

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

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

 

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

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

 

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

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

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

 

sessionStorage

　　　

検証内容

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

コード

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

　　　

検証内容

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

コード

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();
}

 

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