JavaScriptのLocalStrage(ローカルストレージ) の使い方を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptのLocalstrage(ローカルストレージ)の使い方について解説しています。ローカルストレージはJavaScriptを用いてブラウザにデータをKey-Value型で保存する仕組みになっています。クッキーより扱えるデータ量も多く、必要に応じて送信されるなどの点が異なっています。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptのLocalstrage(ローカルストレージ)の使い方について解説します。

実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

 

田島悠介

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

大石ゆかり

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

田島悠介

JavaScriptのLocalstrage(ローカルストレージ)の使い方について詳しく説明していくね!

大石ゆかり

お願いします!

 

LocalStrage(ローカルストレージ)とは

LocalStrageとは、JavaScriptでデータをブラウザに保存する仕組みです。同様な仕組みにSessionStrageやcookieがありますが、以下のような違いがあります。

名称 保持期限 利用
LocalStrage 無制限 ブラウザ(JavaScript)
SessionStrage ブラウザを閉じるまで ブラウザ(JavaScript)
cookie 指定可能 サーバ側
session ブラウザを閉じるまで サーバ側

 

LocalStrage(ローカルストレージ)の使い方

LocalStrageに値を保存するには以下のように記述します。「キー」には任意の文字列を指定します。

localStorage.setItem('キー', 値)

または以下のような記述も可能です。

localStorage.キー = 値
localStorage['キー'] = 値

値を読み込むには以下のように記述します。

localStorage.getItem('キー')

または以下のような記述も可能です。

localStorage.キー
localStorage['キー']

 

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

実際に書いてみよう

今回のサンプルプログラムでは、画面で入力した値をLocalStrageに保存、または読込を行います。結果はログにも出力されます。ログはChromeであれば、デベロッパーツールのConsoleで確認できます。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <script language="javascript" type="text/javascript">
      // 読込
      function load() {
        var mydata = "";
        if(!localStorage.getItem('mydata')) {
          mydata = "データがありません";
        } else {
          mydata = localStorage.getItem('mydata');
        }
        console.log(`mydata= ${mydata}`);
        document.getElementById("mydata_out").innerHTML = mydata;
      }
      // 保存
      function save() {
        var mydata = document.getElementById("mydata_in").value;
        console.log(`mydata_in = ${mydata_in}`);
        localStorage.setItem('mydata', mydata);
      }
    </script>
  </head>
  <body>
    localStrageに保存する値を入力して下さい<br />
    <input name="mydata_in" id="mydata_in" type="text" value="" />
    <br />
    <input type="button" value="読込" onclick="load();"/>
    <input type="button" value="保存" onclick="save();"/>
    <br /><br />
    <div id="mydata_out"></div>
  </body>
</html>

実行結果は以下のようになります。

筆者プロフィール

この記事を監修してくれた方

太田和樹(おおたかずき)
ITベンチャー企業のPM兼エンジニア

普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。

開発実績:画像認識技術を活用した駐車場混雑状況把握(実証実験)、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント

地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。

 

大石ゆかり

cookie(クッキー)との違いなどはありますか?

田島悠介

cookieとの違いは、毎回データを送らないことやデータ量を多く扱えることなどかな。

大石ゆかり

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

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

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