share facebook facebook twitter menu hatena pocket slack

2011.12.09 FRI

HTML5 ローカルデータ保存

小森隆太

WRITTEN BY 小森隆太

こんにちわ。
職人見習いの小森です。

今回は、HTML5のローカルデータ保存について紹介します。

localStrage機能を使うことで、データを永久的に保存でき、ブラウザを閉じても保持されます。
使い方は、localStorageというオブジェクトにプロパティと値を保存します。

下記のような、フォームより保存と読み込みを行います。

○index.html



localStorageに対応していなければ何も処理せず終了する状態になっています。

○storage.js

window.addEventListener("load",function(){
if(!window.localStorage ){
return;
}

document.getElementById("save").addEventListner("click",function(){
var text = documenet.getElementById("memo").value;
window.localStorage.setItem("memo",text);
},true);


document.getElementById("load").addEventListner("click",function(){
var text = window.localStorage.setItem("memo");
documenet.getElementById("memo").value = text;
},true);

},true);

※この記事は、なかの人(spitz8008)が書いています。

小森隆太

小森隆太