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

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

この記事を通して

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

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

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

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

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

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

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

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

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

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

他の利用例としては

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

などがあります。

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

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

 

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

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

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

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

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

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

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

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

操作を分類すると

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

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

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

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

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

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

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

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

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

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

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

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

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

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

保存した値が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
};
*/

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

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

localStorage.removeItem('Key');

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

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

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

localStorage.clear();

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

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

01_「タイトル」と「本文」を入力して「追加」を押すことでローカルストレージに内容が保存されます。

02_「追加」をするとページを更新してもそのメモが残り続けます。

03_「リセット」を押すことで全てのメモを削除できます。

HTML

<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>

CSS

.memoApp{max-width: 375px;margin:0 auto 20px;}
.memoApp input,.memoApp textarea,.memoApp button{margin-bottom: 10px;}

JavaScript

$(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();
	});

});

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

webliker
トップへ戻る