JavaScriptでlocalStorageを使う方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでlocalStorageを使う方法について現役エンジニアが解説しています。localStorageとは、Webブラウザにデータを保存する領域のことです。JavaScriptで操作することが出来て、キー名を指定して、値の保存・削除・登録が行えます。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

JavaScriptでlocalStorageを使う方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptでlocalStorageを使う方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

localStorageとは

localStorageとは、Webブラウザにデータを保存する領域のことです。ブラウザを閉じても保存されたままであることが特徴になります。このlocalStorageを使って、データを保存したり取得したりすることができます。

localStorageはStorageオブジェクトであり、Windowオブジェクトのプロパティとして参照します。localStorageが、どのようなオブジェクトなのかをコンソールに出力して確認しましょう。

console.log(window.localStorage)

もしくは

console.log(localStorage)

頭のwindow.を取っても大丈夫です。

JavaScriptでlocalStorageを使う方法の解説。localStorageオブジェクトをconsoleで確認

lengthというプロパティを唯一持つことが分かります。これは、localStorageに保存したデータの数を表します。何も保存していなければ0という値になります。

localStorageにデータを保存する

localStorageにデータを保存するには、setItemメソッドを使用します。第1引数にはキーの名称を、第2引数には値をそれぞれ渡します。

localStorage.setItem('key', 'value')

ここではキーの名称をkey、値をvalueとしました。このとき、localStorageがどのような状態なのかをコンソールに出力して確認しましょう。

JavaScriptでlocalStroageにデータを保存した後に、localStorageオブジェクトの変化を確認した状態。

データを1つ保存したので、lengthプロパティの値が1増えました。

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

localStorageからデータを取得して出力する

localStorageからデータを取得するには、getItemメソッドを使用します。引数にキーの名称を指定することで、そのキーに応じた値が戻り値として返却されます。

const value = localStorage.getItem('key')

これで、変数valueには文字列のvalueが代入されます。この変数valueをコンソールに出力してみます。

console.log(value)

コンソールにvalueという文字が出力されます。

JavaScriptのlocalStorageでキーを使って値を取得した状態。

ちなみに消したいときはどうするのかと言うと、removeItemメソッドを使用します。

localStorage.removeItem('key')

localStorageをコンソールに出力して確認しましょう。

JavaScriptでlocalStorageを使って、保存した値をキー名で指定して削除した状態

データを1つ削除したので、lengthプロパティの値が1減りました。

筆者プロフィール

メンター久保田さん

Webシステム開発が中心のシステムエンジニア。

HTML、CSS、JavaScript(React、Vue.js)、PHP、Javaが守備範囲。最初に選ぶポケモンは炎タイプ。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でも最短4週間で、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。