WEBデザイン javascript jquery

新米エンジニア小木の議事録　vol.11（ローカルストレージを利用してみよう）

こんにちは。暑いですね。

暑いと鼻に流れる汗のせいでメガネがずり落ちてきます。

そんな暑い気分も吹っ飛ばす、ローカルストレージについて書いていきたいと思います。

ローカルストレージとは？

ローカルストレージはcookieなどと考え方は同じです。情報や設定などをウェブ上に保存しておけます。ローカルストレージを使用している代表的なものはアマゾンです。検索や、見たものなどをローカルストレージに保存して最近チェックしたアイテムなどが表示されるようになっています。

このローカルストレージははJavaScriptで操作すること削除することが可能です。

cookie と ローカルストレージ

ローカルストレージはcookieと似ていますがローカルストレージの方が

・取り扱える情報の量が多い
・cookieは操作する時に cookie.jquery.js などを使わないと使いずらいが、ローカルストレージはJSで簡単に操作が可能
・基本的にずっと保存されている

などの利点がある。

また似たようなものにセッションストレージなどがあるが、こちらはウィンドウ、タブが閉じるまで有効という仕様になっています。

実際に使われている場面

先ほどローカルストレージが実際にアマゾンで使われているというのを言いました。一度クリックしたアイテムの情報をローカルストレージに保存し、別の場所の「最近チェックしたもの」として表示する機能です。

また別の例では、メモ帳などの「お気に入り」機能です。お気に入りボタンを押したということをローカルストレージに保存し、それを使用してお気に入りのアイコンや、お気に入りのメモだけが残っている状態を実装することができます。

実際にやってみよう！

実際にローカルストレージをさわってみます！

ローカルストレージは以下のような形でセットします。

localStorage.setItem('キー', '値');

以上を踏まえた上でhtmlファイルを作成していきます。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>
<body>
	<h1>ローカルストレージに情報を載せます！</h1>
	<input type="text" name="test" id="test">
	<button>クリックして保存</button>
	<!---->
	<p class="savedText"></p>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<script>
		function textPreserve() {
			var sampletext = $('#test').val();
			// テキストボックスにあるテキストをtestTextBoxに保存
			localStorage.setItem("testTextBox", sampletext);
			// getItemでローカルストレージにある情報を取ってくる
			var whatYouTexted = localStorage.getItem("testTextBox");
			// log に表示
			console.log(whatYouTexted);
			//
			$('.savedText').html(whatYouTexted);
		}
		$('button').on('click', textPreserve);
		//
	</script>
</body>
</html>

まずinputのテキストボックスと、ボタンを用意しました。テキストボックスに入力した文字をローカルストレージに保存し、それと同時にその下にあるタグに保存したテキストを表示するような仕様にしました。

var sampletext = $('#test').val();

テキストボックスにある値を変数に入れます。

localStorage.setItem(testTextBox, sampletext);

ローカルストレージに testTextBox というキーに上の変数を値として設定します。

var whatYouTexted = localStorage.getItem(testTextBox);

getItem でキーをもとに値を取得する。

console.log(whatYouTexted);
$('.savedText').html(whatYouTexted);

コンソール、htmlにローカルストレージから取得した情報を反映させている。

ローカルストレージに格納されているかの確認方法

これでは本当にローカルストレージに保存されているかわかりません。保存されているかを確認するには、開発環境で行います。

※windows環境での操作を前提としております。

右クリックをすると「要素を調査」が下のほうにあるのでクリックします。またはF12をクリックします。

01

すると画面の右側に画像のようなものが出てきます。

赤枠の部分を押すとストレージが出てくるのでクリック

02

下のほうにローカルストレージがあるのでクリック、するとローカルストレージに保存されたキーと値が表示されます。これで入力した値がローカルストレージに保存されていることが確認できましたね。

03

まとめ

思ったより簡単に操作することができました。クッキーより簡単＋便利かな？と思いました。これからがんがん使っていきたいですね。皆さんもサンプルを使って試してみてください。

関連サービス
LPO(ランディングページ最適化)

関連記事