ホーム » ブログ » 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人
このエントリーをはてなブックマークに追加


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

お名前:

 

EMAIL:

 

URL:

 

認証コード:

zanmai.net-safecode

 


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

アーカイブ @zanmai.net
check