HTML5 localStrage機能を使ってメモ帳のようなものを作成



ローカルストレージ機能調査

HTML5でブラウザ上でデータの保存ができるらしい情報を手に入れたので調べてみた。

要するにHTML5対応のブラウザを利用して、
javascriptからデータをローカルストレージというブラウザ上のデータ置き場へ保存して、
オフラインになった時やブラウザを立ち上げ直した場合にデータを利用することが出来る機能らしい。

参考: HTMLクイックリファレンス HTML5のAPI、および、関連仕様> Web Storage

特徴

  • ブラウザ上へローカルストレージとして5Mまで保存できる
  • セッションストレージとローカルストレージが存在する
    • セッションストレージ: ブラウザ・タブ間でデータを共有できない ブラウザを閉じると消える
    • ローカルストレージ: データは永続的に保存可能
  • 1つのkeyに対して1つのデータを登録することができる

ローカルストレージを利用したメモ的なもの

記入した内容をローカルストレージ上へ保存して、
再度訪れた時にまた記入した内容を利用できるメモ的なものを作成してみました。
動作確認はubuntuのchromeで行いました。

テストページへ
テストページでなにか記入してみて保存したあとに、
リロードをおこなってみてください。
おそらくデータが消えずに残っているはず。

chromeなら右クリックをして要素の検証で中身を確認することができます。

chromeでの確認

ソース

[html]
<!DOCUMENT html>
<html lang="ja">
<head>
<meta charset="utf-8">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

</head>
<body>

Title: <input type="text" id="title"><br />
<textarea id="textarea1"></textarea>

<button id="save">保存</button>
<button id="delete">削除</button>

<script>
// Data Load
$(function(){
$("#title").val(window.localStorage.getItem(‘title’));
$("#textarea1").val(window.localStorage.getItem(‘text’));
});

$("#save").click(function(){
window.localStorage.setItem(‘title’, $("#title").val());
window.localStorage.setItem(‘text’, $("#textarea1").val());
alert("データを保存しました。");
});

$("#delete").click(function(){
window.localStorage.clear();
$("#title").val(”);
$("#textarea1").val(”);
alert("データを全て削除しました。");
});

</script>

</body>
</html>
[/html]



コメントを残す