HTML5のWeb Storage利用サンプル_技術三昧ブログ

ホーム » ブログ » HTML5のWeb Storage利用サンプル

@2016/08/19

HTML5から新規追加した機能であるweb storageの利用場面がありました。ここで一番基本なサンプルを載せます。

例：テキストに入力した値をweb storageに保存。そして保存した値を取り出しサンプル。


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$(function(){
	/* 入力値をweb storageでローカルに保存 */
	$('#saveButton').click(function(){
		if(window.localStorage){
			var s = $('#text1').val();
			localStorage.setItem("key1", s);
			alert('値【　' + s + '　】をlocalStorageに保存しました。');
		}
	});
	/* web storageから値を取り出し */
	$('#readButton').click(function(){
		if(window.localStorage){
			alert( 'localStorageから【　' + localStorage.getItem("key1") + '　】を取り出しました。');
		}

	});
});
</script>
</head>
<body>
<h1>html5 Web Storage</h1>

<h2>保存&読取</h2>
<div>
<input type="text" id="text1">
<button type="button" id="saveButton">保存</button>
</div>

<h2>読込み</h2>
<div>
<button type="button" id="readButton">読取</button>
</div>

</body>
</html>

ごく簡単なコードですね。説明なし。

ここでメモを。

♪ 当記事がお役に立ちましたらシェアして頂ければ嬉しいです。

0人

★ 当記事を閲覧の方は下記の【関連記事】も閲覧していました。

閲覧履歴(直近10件)

◎zanmai.netサイト記事の転載・複製（コピー）は、zanmai.netへのリンクであることを明記してください！
◎本記事URL: https://www.zanmai.net/blog/data/258.html

閉じる

HTML5のWeb Storage利用サンプル_ブログ_zanmai.net

※会員の方は認証コードを要らないから、新規登録をオススメ！