114人がいいねしました

更新日

【サンプル付き】Local Storageとは?使い方を詳しく解説

web兄さん

html5から導入されたLocalStorage(ローカルストレージ)の使い方をサンプルアプリを用いて丁寧に説明していきます。

この記事を通して

  • LocalStorage(ローカルストレージ)とはなにか
  • LocalStorage(ローカルストレージ)の基本的な使い方
  • サンプルアプリで実際の使い方

をしっかりと理解することができます。

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

ローカルストレージで何ができるかわかった上で、そもそもローカルストレージ(LocalStorage)とは何か?に触れていきましょう。

前述したようにローカルストレージ(LocalStorage)とはjavascript利用することでユーザーのデータをwebブラウザ(ローカル環境)に保存することができる仕組みです。
他にはwebstoroageなんて呼び方もあります。

ローカルストレージ(LocalStorage)を用いたデータの保存・取得・削除はとても簡単で、keyとvalueでデータを紐付けてデータを操作します。

LocalStorage(ローカルストレージ)って何ができるの?

ローカルストレージを使う最も大きなメリットはデータベースとの連携が必要ないということです。

ユーザーの行動(どのページを見ただとか、どの商品にお気に入りボタンを押したなど)データをブラウザに保存することができるため、サーバーサイドについて詳しくない方でもjqueryがある程度できれば使用することができます。

Amazonでも、閲覧した商品のデータをLocalStorageへ保存し、次回アクセス時に【最近閲覧した商品】として表示しています。

他の利用例としては

  • お気に入りボタンを付けた商品の一覧ページをつくれる
  • メモ機能をつくることができる

などがあります。

「ユーザーごとのデータを保存して再利用したいけど、ログイン機能をつけるほどでもないんだよな」という時にローカルストレージは活躍します。ユーザーごとの情報を識別するのが「ブラウザ」なので、ログインをしてユーザーごとのデータを扱うという手間が発生しません。

事実、ログインをするということはユーザーにとって手間でしかないため、ないならない方がユーザーにとっても都合がよいのです。

Cookie(クッキー)とLocalstorage(ローカルストレージ)は何が違うのか

よく比較されるのが同じような機能を持つクッキー(Cookie)です。結果的にできることはほぼ同じですが、保存できるデータ容量や保存期間、通信の回数などやはりローカルストレージに軍配があがります。特別な理由がなければローカルストレージ(localstorage)が使うことをオススメします。

保存期間データ容量通信
LocalStorage半永久5MBytesなし
Cookie有り
(ブラウザ側の有効期限の設定による)
4KBytesリクエストの
都度発生する

ローカルストレージ対応ブラウザバージョン

ブラウザバージョン
Chromever8〜
Firefoxver3.6〜
Internet Explorerver8〜
Safariver5〜
Operaver11〜

ブラウザの対応対応範囲を確認できたら、ローカルストレージ(LocalStorage)の使い方を見ていきましょう。

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

ローカルストレージの利用方法は非常にシンプルです。

操作を分類すると

  • 保存
  • 取得
  • 削除
  • 初期化

と4つにわけることができそれぞれの操作につき1つの関数が用意されています。各操作の関数は以下です。

Localstorage(ローカルストレージ)へのデータの保存

関数を使う方法と、オブジェクトのプロパティとして保存する方法があります。

//その1:関数を使うパターン
localStorage.setItem('Key', '保存する値');
//その2:オブジェクトのプロパティとして保存するパターン
localStorage.saveKey = '保存する値';

Localstorage(ローカルストレージ)からデータの取得

保存した値を取りだします。こちらも保存同様2パターンあります。

//その1:関するを使うパターン
var value = localStorage.getItem('Key');
//その2:オブジェクトのプロパティを取得するパターン
var value = localStorage.saveKey;

Localstorage(ローカルストレージ)への複数データの保存

複数のデータを保存したい場合はJSON形式のデータとして保存します。

注意したいのが複数の値(配列)を保存した場合は、JSON文字列に変換する必要があるということです。

JSON.stringify(obj)を使いJSON文字列へ変換してからローカルストレージへ保存しましょう。

var obj = {
      last : tarou,
      first : yamada
    };
var obj = JSON.stringify(obj);
localStorage.setItem('Key', obj);

Localstorage(ローカルストレージ)への複数データの取得

保存した値がJSON形式なのでもちろん取得する値はJSON形式で返ってきます。このままではjavascriptで扱えないので、取得 したJSON形式のデータをJSON.parse(obj)を使いjavascriptのオブジェクトへ変換します

var jsonObj = localStorage.getItem('Key');
var jsObj = JSON.parse(jsonObj);
console.log(jsObj);
/*
obj = {
   last : tarou,
   first : yamada
};
*/

Localstorage(ローカルストレージ)からデータの削除

削除はキーを指定するだけでキーに紐付いた値がローカルストレージ上から削除されます。

localStorage.removeItem('Key');

Localstorage(ローカルストレージ)を初期化する

まとめてデータを削除したい場合は「localStorage.clear()」が便利です。この一行でローカルストレージに保存されているすべ

てのデータを削除することができます。

localStorage.clear();

Localstorage(ローカルストレージ)の使い方サンプル

このサンプルはjQueryを使用しています

基本的な使い方を理解したところで、実際にローカルストレージを使用したサンプルを見てみましょう。

  1. 「タイトル」と「本文」を入力して「追加」を押すことでローカルストレージに内容が保存されます。
  2. 「追加」をするとページを更新してもそのメモが残り続けます。
  3. 「リセット」を押すことで全てのメモを削除できます。

<div class="memoApp">
  <div class="memoForm">
    <input type="text" id="title" class="form-control" placeholder="タイトル" />
    <textarea class="form-control" rows="3" placeholder="本文" id="body"></textarea>
    <button type="button" class="btn btn-primary btn-block" id="btnAdd">追加</button>
  </div>

  <div id="memoArea">
  </div>

  <button type="button" class="btn btn-primary btn-block" id="btnReset">リセット</button>
</div>
.memoApp{
  max-width: 375px;
  margin:0 auto 20px;
}

.memoApp input,
.memoApp textarea,
.memoApp button{
  margin-bottom: 10px;
}
$(document).ready(function(){

	var saveStorage = function(key,val){
		localStorage.setItem(key, JSON.stringify(val));
	};

	var getStorage = function(key){
		var obj = localStorage.getItem(key);
		return JSON.parse(obj);
	};

	var add = function(){
		var ttl = $(".memoForm #title").val();
				bdy = $(".memoForm #body").val();
		addMemo(ttl,bdy);
		saveMemo(ttl,bdy);
	};

	var addMemo = function(ttl,bdy){
		    var template =
                    '<input type="text" id="title" class="form-control" readonly="readonly" value="%s"/>' +
          '<textarea class="form-control" rows="3" id="body" readonly="readonly">%s</textarea>';
                    template = template.replace('%s',ttl).replace('%s',bdy);


		$("#memoArea").append(template);

		$(".memoForm #title").val('');
		$(".memoForm #body").val('');
	}

	memoArr = [];
	var storageKey = 'memoObj';

	var saveMemo = function(ttl,bdy){
		var memoObj = {
			ttl : ttl,
			bdy : bdy
		};
		memoArr.push(memoObj);
		saveStorage(storageKey,memoArr);
	}

	var resetMemo = function(){
		$("#memoArea").children().remove();
		window.localStorage.clear();
	}

	var readMemo = function(){
		var memoObjs = getStorage(storageKey);
		if (memoObjs.length == null) return;
		for (var i = 0; i < memoObjs.length; i ++) {
			var memoObj = memoObjs[i];
			var ttl = memoObj.ttl;
			var bdy = memoObj.bdy;
			var memoObj = {
				ttl : ttl,
				bdy : bdy
			};
		memoArr.push(memoObj);
		saveStorage(storageKey,memoArr);
			addMemo(ttl,bdy);
		}
	};

	//ページ読込み時にメモ復帰
	readMemo();

	//イベントハンドル
	$("#btnAdd").on('click',function(){
		add();
	});
	$("#btnReset").on('click',function(){
		resetMemo();
	});

});

以上Localstorage(ローカルストレージ)の使い方の説明でした。

“WEB制作の勉強で失敗したくないあなたへ”

サイト制作をホントに0から学習できる教材を無料配布中!

\モダンなポートフォリオサイトが作れるように!/
  • 他のスクールなら確実に「有料級」のWEB制作の教材が今なら無料で閲覧可能!
  • ディレクター、デザイナー、エンジニアすべて一貫できる現役プロが1人で作成したから体系的に学習できる
  • 4つの課題にチャレンジしながら着実に基礎を固めていくから挫折がない

無料配布の講座では、このようにモダンなポートフォリオサイトが作れちゃいます!

特設ページで詳しくチェックする

スクール越えの圧倒的なコスパ1ヶ月でWeb制作を身に着ける

プロのメンターサポート付き実務レベルのコーディングカリキュラム

詳細を今すぐチェック!

ギャクサンで作成するポートフォリオサイトのイメージ

記事では見れない豆知識

圧倒的なコスパを体感1ヶ月でWeb制作を身に着ける

プロのメンターサポート付き実務レベルのコーディングカリキュラム

詳細を今すぐチェック!

ギャクサンで作成するポートフォリオサイトのイメージ