javascript sessionStorageの簡単な使い方
- 2021.01.11
- javascript
- javascript

javascriptで、データをブラウザ上に一時的に保存できるsessionStorageの簡単な使い方を記述してます。
環境
- OS windows10 pro 64bit
- Apache 2.4.43
- ブラウザ chrome 84.0.4147.105
sessionStorage使い方
まずは、sessionStorageが使用できるブラウザを判定します。
1 2 3 4 5 6 |
if (window.sessionStorage) { // 使用できる } else{ // 使用できない } |
次に、setItemメソッドを使用して、sessionStorageに値を保存してみます。構文は以下となります。
1 |
sessionStorage.setItem('キー', 値) |
json形式のデータを保存。sessionStorageへの保存期間はブラウザを開いてる間のみとなります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// ウェブストレージに対応している場合 if (window.localStorage) { // 保存するオブジェクト const obj = { str: 'Hello' }; // オブジェクトをjsonに変換 const txt = JSON.stringify(obj); // jsonデータをsessionStorageに保存 sessionStorage.setItem("hoge", txt); } |
保存されたデータは、Developer ToolsのApplicationタグより確認することが可能です。

setItemは、以下のように記述しても同じです。
1 2 |
sessionStorage.hoge= txt; sessionStorage['hoge']= txt; |
次に、getItemメソッドを使用して、保存したsessionStorageのデータを取得してconsoleに表示してみます。
1 |
sessionStorage.getItem("キー名"); |
さきほど作成したlocalStorageから取得します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
// ウェブストレージに対応している場合 if (window.localStorage) { // 保存するオブジェクト const obj = { str: 'Hello' }; // オブジェクトをjsonに変換 const txt = JSON.stringify(obj); // jsonデータをsessionStorageに保存 sessionStorage.setItem("hoge", txt); // sessionStorageに保存したものをキーを指定して取得 const item = sessionStorage.getItem("hoge"); // コンソールに出力 console.log(item); } |
Consoleに表示されていることが確認できます。

キーを削除する場合は、removeItemを使用します。
1 |
sessionStorage.removeItem("キー名"); |
全て削除する場合は、clearメソッドを使用します。
1 |
sessionStorage.clear(); |
-
前の記事
Ruby 0~9までの乱数を発生させる「rand」と「random.rand」のパフォーマンスを計測する 2021.01.11
-
次の記事
C# 文字列の一部を抽出する 2021.01.11
コメントを書く