sessionStorageを使ってブラウザにデータを持たせよう!

sessionStorageとは

sessionStorageとは HTML5から導入されたWebStorageという仕組みを利用し、JavaScriptを使ってブラウザにデータを保持できる仕組みです。
WebStorageには二通りあって localStorageとsessionStorageが存在します。
この記事ではsessionStorageを使います！

localStorageとsessionStorageの違い

• WebStorage
  • localStorage
    ブラウザを閉じたり再び開いたりしても持続します。
  • sessionStorage
    ページのセッション中 (ページの再読み込みや復元を含む、ブラウザを開いている間) に使用可能な、生成元ごとに区切られた保存領域を管理します。

対応ブラウザについて

対応ブラウザは以下のリンクのブラウザ実装状況を確認してください。
Web Storage API

使い方について

値を保存する際はkeyとvalueを使い、取得・削除する際はkeyを指定して操作します。

保存

sessionStorge.key = 'value'``` または sessionStorage['key'] = 'value'またはsessionStorage.setItem('key', 'value')`

取得

sessionStorge.getItem('key')

削除

sessionStorge.removeItem('key')

初期化

sessionStorage.clear()

最後に

上記のようにsessionStorageを使ってブラウザにデータを持たせることができます
良いsessionStorageライフを