わんすけに聞いてみる Web開発 [HTML5]Web Storageを試す(sessionStorage/localStorage)

[HTML5]Web Storageを試す(sessionStorage/localStorage)

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

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

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

 

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

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

 

1.Web Storageには2種類あるらしい。
  • 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();
}

 

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

「[HTML5]Web Storageを試す(sessionStorage/localStorage)」への1件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Related Post