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>