Window.sessionStorageの使い方

この記事ではブラウザ上にデータを保存できる機能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

参考