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

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

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

 

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

 

 

localStorageとは

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

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

console.log(window.localStorage)

もしくは

console.log(localStorage)

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

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

localStorageにデータを保存する

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

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

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

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

[PR] フロントエンドで副業する学習方法を動画で公開中

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

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

const value = localStorage.getItem('key')

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

console.log(value)

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

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

localStorage.removeItem('key')

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

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

筆者プロフィール

メンター久保田さん Webシステム開発が中心のシステムエンジニア。 HTML、CSS、JavaScript（React、Vue.js）、PHP、Javaが守備範囲。最初に選ぶポケモンは炎タイプ。

 

 

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

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