HTML5 localStrage機能を使ってメモ帳のようなものを作成
- 2012.12.26
- Tech
- html5, jquery, localstrage
ローカルストレージ機能調査
HTML5でブラウザ上でデータの保存ができるらしい情報を手に入れたので調べてみた。
要するにHTML5対応のブラウザを利用して、
javascriptからデータをローカルストレージというブラウザ上のデータ置き場へ保存して、
オフラインになった時やブラウザを立ち上げ直した場合にデータを利用することが出来る機能らしい。
参考: HTMLクイックリファレンス HTML5のAPI、および、関連仕様> Web Storage
特徴
- ブラウザ上へローカルストレージとして5Mまで保存できる
- セッションストレージとローカルストレージが存在する
- セッションストレージ: ブラウザ・タブ間でデータを共有できない ブラウザを閉じると消える
- ローカルストレージ: データは永続的に保存可能
- 1つのkeyに対して1つのデータを登録することができる
ローカルストレージを利用したメモ的なもの
記入した内容をローカルストレージ上へ保存して、
再度訪れた時にまた記入した内容を利用できるメモ的なものを作成してみました。
動作確認はubuntuのchromeで行いました。
テストページへ
テストページでなにか記入してみて保存したあとに、
リロードをおこなってみてください。
おそらくデータが消えずに残っているはず。
chromeなら右クリックをして要素の検証で中身を確認することができます。
ソース
<!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>
-
前の記事
Time Capsuleへのバックアップでファイルが使用中と言われた時の対処 2012.12.22
-
次の記事
MongoDBの基本操作メモ 2012.12.31
コメントを投稿するにはログインしてください。