この記事ではブラウザ上にデータを保存できる機能Web Storageの一つであるsessionStorageの使い方を解説します。
Web StorageにはlocalStorageとsessionStorageの2つがあります。
sessionStorageはセッション終了時(ブラウザのタブが閉じられた時)にデータが破棄されますが、localStorageは明示的に削除しない限りデータは残り続ける、という違いがあります。
使い方
データの保存(setItem)
第一引数にキー、第二引数に値を渡します。
window.sessionStorage.setItem('name', 'Michael');
データの取得(getItem)
キー名を指定して取得します。
const name = window.sessionStorage.getItem('name');
console.log(name); // Michael
/* 存在しないデータを取得しようとするとnullになる */
const age = window.sessionStorage.getItem('age');
console.log(age); // null
データの削除(removeItem)
キー名を指定して削除します。
window.sessionStorage.removeItem('name');
全データの削除(clear)
window.sessionStorage.clear();
キー名の取得(key)
取得したいキーのインデックスを指定します。
window.sessionStorage.key(0);
console.log(keyName); // name
アイテムの総数を取得(length)
window.sessionStorage.setItem('name', 'Michael');
window.sessionStorage.setItem('age', '20');
window.sessionStorage.setItem('birthday', '1999/12/02');
const count = window.sessionStorage.length;
console.log(count); // 3