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

小森隆太

小森隆太

cloudpack

cloudpackは、Amazon EC2やAmazon S3をはじめとするAWSの各種プロダクトを利用する際の、導入・設計から運用保守を含んだフルマネージドのサービスを提供し、バックアップや24時間365日の監視/障害対応、技術的な問い合わせに対するサポートなどを行っております。
AWS上のインフラ構築およびAWSを活用したシステム開発など、案件のご相談はcloudpack.jpよりご連絡ください。