14
13

More than 3 years have passed since last update.

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

Last updated at Posted at 2017-11-29

sessionStorageとは

sessionStorageとは HTML5から導入されたWebStorageという仕組みを利用し、JavaScriptを使ってブラウザにデータを保持できる仕組みです。
WebStorageには二通りあって localStoragesessionStorageが存在します。
この記事では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を使ってブラウザにデータを持たせることができます:thumbsup:
良いsessionStorageライフを:sunny:

14
13
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
13