【サンプル付き】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	リクエストの都度発生する

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

ブラウザ	バージョン
Chrome	ver8〜
Firefox	ver3.6〜
Internet Explorer	ver8〜
Safari	ver5〜
Opera	ver11〜

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

Localstorage（ローカルストレージ）の使い方

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

操作を分類すると

保存
取得
削除
初期化

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

Localstorage（ローカルストレージ）へのデータの保存

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

//その１：関数を使うパターン
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を使用しています

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

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

<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（ローカルストレージ）の使い方の説明でした。