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

今回は、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)が書いています。