SessionStorage

ページのセッションがある間に有効なStorage

window.sessionStorageは読み込み専用で、key-valueはsetItem, getItem,removeItemで操作する

code:js

sessionStorage.setItem('key', 'value');

let item = sessionStorage.getItem('key');

sessionStorage.removeItem('key');

valueはstringなので、arrayやobjectを入れたい場合はJSON.stringifyするのが常套手段

値を更新するときはgetItemしてJSON.parseしてarrayやobjectにpushするなりなんなりしてJSON.stringifyしたやつをsetItem

例えばこう

code:js

getItemした値が無い可能性もあるので、もっと言えばこう

code:js

sessionStorage.getItem('key') ? sessionStorage.setItem('key', JSON.stringify(...JSON.parse(sessionStorage.getItem('key'), value) : sessionStorage.setIetm('key', JSON.stringify(value);

値が変更された時には、Web Storageのwindow.storageイベントが発火すると思ったのだが、しない?

StorageEvent は、Storage オブジェクトが変更されるたびに発生します (sessionStorage の変更では発生しません) 。これは、変更を行ったページ上では効果がないでしょう。実際は、ストレージを使用するドメイン上の別のページで、ストレージの変更に同期するための手段です。