【JavaScript】インスタンス化とは？なぜ必要なのか？生成方法は？
takahide
初心者がITを楽しむブログ
【JavaScript】WEBストレージを使えるようになろう（localStorage/sessionStorage）
takahide
おはようございます。タカヒデです。
本日は、「JavaScriptにおける、『WEBストレージ』について、『localStorageプロパティ』『sessionStorageプロパティ』」を紹介します。
こんな人にオススメ
- JavaScriptにおける『WEBストレージ』が理解できない
- 『localStorageプロパティ』『sessionStorageプロパティ』の記載方法を知りたい
ぜひ本記事を参考にしてください。
WEBストレージとは？
プログラミング学習や、WEBの書籍などを読んでいると「WEBストレージ」という言葉をよく耳にしますよね。
このWEBストレージ、どのような意味なのでしょう？
WEBストレージとは、「ブラウザでデータを保管する仕組み」のことを指します。
ちょっと言い換えると、「サーバーにデータを送らずに、自分のブラウザ内でデータを保管できる場所」って感じです。
これによって、
- ページを更新してもデータを残せる
- サーバー無しでデータを保存できる
こんなメリットがあります。
このWEBストレージは、『ローカルストレージ』と『セッションストレージ』の2種類に分類さます。
ローカルストレージ
『localStorageプロパティ』を使用して記載します。
以下の特徴があります。
- ウインドウ・タブを跨いだデータ共有：○
- ブラウザを閉じた際のデータ保持：○
ログイン情報とか、入力途中のデータの保存に使うようです。
セッションストレージ
『sessionStorageプロパティ』を使用して記載します。
以下の特徴があります。
- ウインドウ・タブを跨いだデータ共有：×
- ブラウザを閉じた際のデータ保持：×
一時的なフォーム情報の登録に使うようです。
ストレージにデータを保存/取得する方法
では、ストレージにデータを保存する方法と、データを取得する方法を見ていきましょう。
ここでは『ローカルストレージ』で記載していますが、『セッションストレージ』の場合も記載方法はほとんど変わりません。
セッションストレージの場合は同様の記載方法で『localStorage』を『sessionStorage』に変更することで記載できます。
■データの保存
//記載方法
方法1：localStorage.setItem(‘キー名’ , ’値’)
方法2：localStorage.キー名 = ‘値’
方法3：localStorage['キー名'] = ‘値’■データの取得
//記載方法
方法1：localStorage.getItem(‘キー名’)
方法2：localStorage.キー名
方法3：localStorage['キー名’]
方法を3種類記載していますが、いずれの方法でも記載可能です。
以下が記載例です。
localStorage.setItem("food1", "うどん");
console.log(localStorage.getItem("food1"));
//実行結果：うどん『food1』キーに『うどん』という値が保存されていることが分かります。
「F12」を押してデベロッパーツールのアプリケーションからローカルストレージも確認してみてください。
↓こんな感じでストレージに保存されているかと思います。
ストレージのデータを削除
続いて、ストレージのデータを削除する方法です。
こちらも、セッションストレージの場合は同様の記載方法で『localStorage』を『sessionStorage』に変更することで記載できます。
■データの削除
//記載方法
方法1：localStorage.removeItem(‘キー名’)
方法2：delete localStorage.キー名
方法3：delete localStorage['キー名']■データの全削除
//記載方法
localStorage.clear()こちらも方法を3種類記載していますが、いずれの方法でも記載可能です。
以下が記載例です。
localStorage.removeItem("food1");
console.log(localStorage.getItem("food1"));
//実行結果：null先ほど保存した『food1』キーと『うどん』という値がローカルストレージから削除されていることが分かります。
デベロッパーツールのローカルストレージも削除されているので確認してみてください。
まとめ
以上が「JavaScriptにおける『WEBストレージ』について、『localStorageプロパティ』『sessionStorageプロパティ』」でした。
まとめ
- WEBストレージとは、ブラウザでデータを保管すること
- データの保存：localStorage.setItem(‘キー名’ , ’値’)
- データの取得：localStorage.getItem(‘キー名’)
- データの削除：localStorage.removeItem(‘キー名’)
この記事が誰かの参考になれば幸いです。
お疲れさまでした。
ABOUT ME
通信会社の企画職で働く30代
非エンジニアでありながら半分趣味でITエンジニアリングやプログラミングを学習中
IT初心者が楽しいと思えるように発信することを目指しています
↓Xもやっているのでフォローしてね
