本記事では、JavaScriptのローカルストレージ/セッションストレージにデータを追加・取得・削除する方法について解説しています。Amazon調べ)Amazonで探す楽天市場で探すYahoo!ショッピングで探すポチップ目次ローカルストレージ/セッションストレージにデータを追加ローカルストレージ/セッションストレージにデータを追加する方法は以下のとおりです。value;setItemメソッドの使い方localStorage:データを追加するストレージをローカルストレージに指定sessionStorage:データを追加するストレージをセッションストレージに指定key:値と紐づけるキーを指定value:追加したい値を指定ローカルストレージ/セッションストレージにはデータを追加する書き方が3つあり、setItemメソッド以外はオブジェクトに値を追加する時と同じ書き方です。実際に、ローカルストレージ/セッションストレージにデータを追加してみましょう。"sushi");下記の画像は上記コードを実行した後にストレージに保存されているデータを撮ったものです。設定したkeyと値が各ストレージに分けられ保存されていることが確認できます。ローカルストレージのkeyと値セッションストレージのkeyと値ローカルストレージ/セッションストレージのデータを取得ローカルストレージ/セッションストレージのデータを取得する方法は以下のとおりです。セッションストレージsessionStorage.getItem(key);sessionStorage.key;sessionStorage[key];getItemメソッドの使い方localStorage:取得したいデータがローカルストレージに保存されている場合に指定sessionStorage:取得したいデータがセッションストレージに保存されている場合に指定key:取得したい値と紐づいているキーを指定データを追加する時と全く同じで書き方は3つあり、getItemメソッド以外はオブジェクトのプロパティ(key)に設定している値を参照する時と同じ書き方です。先ほどローカルストレージ/セッションストレージに追加したデータを取得してみましょう。sushiローカルストレージ/セッションストレージのデータを削除ローカルストレージ/セッションストレージのデータを削除する方法は以下のとおりです。sessionStorage[key];removeItemメソッドの使い方localStorage:削除したいデータがローカルストレージに保存されている場合に指定sessionStorage:削除したいデータがセッションストレージに保存されている場合に指定key:削除したい値と紐づいているキーを指定removeItemメソッドの他にもdelete演算子で削除することも出来ます。始めにローカルストレージ/セッションストレージに追加したデータを削除してみましょう。keyに指定した文字列は「food」です。セッションストレージsessionStorage.removeItem("food");下記の画像は上記コードを実行した後にストレージに保存されているデータを撮ったものです。ローカルストレージ/セッションストレージに何もデータが入っていないことが確認できます。全ての値を削除したい場合ローカルストレージ/セッションストレージに保存されているデータを全て削除したい場合は、clearメソッドを使用します。AGENTは、国内最大級の転職支援実績を持つIT・Web業界に強い転職エージェントです。詳細をみるフリーランス案件紹介サイトMidworksは豊富な案件と「フリーランス」と「正社員」の、良いとこ取りをした働き方を実現する手厚い保障が特徴のエージェントです。月額980円で読み放題。