localStorageを使って、簡易メモ帳を作ってみよう ITかあさん

ITかあさん

localStorageを使って、簡易メモ帳を作ってみよう

localStorageとは

JavaScriptコードからアクセスできて、テキスト形式の任意のデータを保存できます。例えばサーバー側からデータをキャッシュとしてローカルに保存することが出来、localStorageではオフライン状態でも保存したデータを見ることが出来ます。
スマートフォンサイトなどではこの機能を使ってサイトの高速化を実現できます。

localStorageの基本プロパティ

localStorageでは下記の項目のプロパティを使うことが出来ます。なお、保存できるのはテキストデータのみです。画像などの保存は出来ません。

length ストレージに保存されている項目の数
key(index) 指定されたインデックスのkeyの取得
getItem(key) keyの値を取得
setItem(key, data) keyにdataを保存する
removeItem(key) 指定されたKeyの値削除
clear() ストレージ全体を削除

localStorage簡易メモ

ざっとコードを解説しますと、
・window.onloadでページを開いたら処理を開始
・ストレージ内のデータを読み込み
・ストレージのデータが空でなければ呼び出し
・$(“#del”).click()で削除ボタンのクリックでストレージ削除してリロード
・$(“form”).submit()で送信ボタンが押されたらストレージデータの更新

<!DOCTYPE html>
<html><head><meta charset="utf-8"></head><body>
<h1>strageメモ</h1>
<div id="msg_div"></div>

<form method="post">
<textarea id="main_txt" cols="80" rows="30"></textarea>
<input type="submit" value="送信"/>
</form>
<input type="button" value="削除" id="del"/>
<!-- Android 1.6対策 -->
<script type="text/javascript" src="./js/gear5-0.3.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

<script type="text/javascript">
window.onload = function() {
// メモの読み込み
var body = localStorage.getItem("memo");//strageに保存されたメモ
var date_time = localStorage.getItem("date_time");//strageに保存された日時
if (body != null) {
$('#main_txt').val(body);
$('#msg_div').text(date_time);

}
};

//削除ボタンを押したらストレージ削除
$("#del").click(function () {
localStorage.clear();
window.location.reload();
});

//送信ボタンを押したら、ストレージを保存
$("form").submit(function() {
localStorage.setItem("memo", $('#main_txt').val());
localStorage.setItem("date_time", new Date());//保存日時
});

</script>
</body>
</html>

初夏のJavaScript祭 in サーキュレーションビル ForPro