スキップしてメイン コンテンツに移動

JavaScriptオブジェクト⇔[JSON]⇔ローカルストレージの流れ

Opera Extensionsでも作ってみたいないと・・サンプルを見ていたら、データの保持にlocalStorageというやり方がありました。

localStrageはHTML5からの仕様で、Cookie の代わりとなるものでだが、より大容量データをブラウザに保存できるものだそうです。こちらの概要がわかりやすいと思います。

・Safari4 と IE8 で実装された DOM Storage とは何か - IT戦記
http://d.hatena.ne.jp/amachang/20080924/1222239494

で、直接値を入れて保存することもできますが、ここでは、JSON形式にしてデータを出し入れしてみたいと思います。

JavaScript ⇔ [JSON] ⇔ localStrage

その前に、JSONでどのようなデータを扱うかですが、下記のように、サイトのタイトルとURLを複数個格納するデータです。

{"modified":"2011/04/15 Fri",
"items":
   [
   {"title":"タイトル1","url":"http://www.yahoo.co.jp/"},
   {"title":"タイトル2","url":"http://www.google.co.jp/"}
   {"title":"タイトル3","url":"http://twitter.com/"}
   ]
}

流れはJavaScriptオブジェクトにデータを格納し、それをJSONデータにします。それをローカルストレージへ保存します。もう一方では、ローカルストレージからJSONデータを取得し、そのデータをJavaScriptオブジェクトとして扱います。サンプルプログラムは下記の通りです。

<!doctype html>
<html lang="ja">
  <head>
    <title>JavaScript→JSON→ローカルストレージ→JSON→JavaScript</title>
    <style>
    </style>
    <script>


    // Setボタンの処理
    window.addEventListener("load", function(){
        document.getElementById("setButton").onclick = function(){



            // JavaScriptオブジェクトにデータを設定
            var object = {};



            object.modified = "2011/04/15 Fri";
            object.items = new Array();



            object.items[0] = {};
            object.items[0].title = "タイトル1";

            object.items[0].url = "http://www.yahoo.co.jp/"



            object.items[1] = {};
            object.items[1].title = "タイトル2";

            object.items[1].url = "http://www.google.co.jp/"



            // itemsへデータを追加する場合の書き方例
            var data = {};

            data.title = "タイトル3";

            data.url = "http://twitter.com/"

            object.items.push(data);



            // JavaScriptオブジェクト→JSONデータに変換
            nativeJSON = JSON.stringify(object);



            // ローカルストレージへ保存
            localStorage.setItem('urlhistory', nativeJSON);



            document.getElementById("display").innerHTML = "set!";
        }

    }, false);



    // Getボタンの処理
    window.addEventListener("load", function(){
        document.getElementById("getButton").onclick = function(){



            // Setボタンで保存されたデータを取得
            var nativeJSON = localStorage.getItem('urlhistory');



            // JSONデータ→JavaScriptオブジェクトに変換
            var object = JSON.parse(nativeJSON);



            // オブジェクトからデータ取得
            var html = "modified:" + object.modified + "<BR>";



            for(var idx=0; idx < object.items.length; idx++) {
                html = html + "■items" + idx + "<BR>";

                html = html + "title:" + object.items[idx].title + "<BR>";

                html = html + "url:" + object.items[idx].url + "<BR>";

            }



            // 表示
            document.getElementById("display").innerHTML = html;



        }
    }, false);



    </script>
  </head>
  <body>
    <button id="setButton">
        Set
    </button>


    <button id="getButton">
        Get
    </button>
    <BR>


    <div id="display">display</div>


  </body>
</html>



このサンプルでは、 下図のように2つボタンがあり、

WS000109

まず、Setボタンを押すと、JavaScriptオブジェクト→JSON→ローカルストレージへ保存という動作をします。
 WS000110

次に、Getボタンを押すと、ローカルストレージ→JSON→JavaScriptオブジェクト→内容を表示という動作をします。

WS000111 

ローカルストレージから取り出したJSONデータを変換することで、JavaScriptオブジェクトとして使えるので、それをループで回して、HTML文を作成して表示しています。

コメント

このブログの人気の投稿

GolangでWindows GUIアプリケーション

GUIアプリ作成の前提 社内ツールとしてexeで配布 開発環境はGoLandを使う 社内ツールとしてexeを配布ということであれば、Visual StudioでC#による開発だと思います。しかしながら、Go言語を習得したいのと、GoLandの補完機能が便利で、Android Studio使っていたこともあり、とっつきやすいという点からGo縛りでGUIアプリケーションを考えたいと思います。 lxn/walk Windows application library kit for Go. Windows向けしか考えていないので、まずこのライブラリなのですが、ボタンやコンボボックスが思ったように並ばなかったり、手軽にイメージボタンを配置したりなど、簡単にレイアウトを変更できない課題に直面しました。レイアウト作成だけで時間を取られてしまいます。そう言えば、Androidアプリ開発のときは、XMLでデザイン部分を切り離してたのを思い出して、今回の調査の運びとなりました。 fyne-io/fyne Cross platform native GUIs designed for Go based on Material Design. Supports: Linux, macOS, Windows, BSD, iOS and Android. walkと比べると、クロスプラットフォームで作成できるのですが、こちらもコードの中にデザインを書いていく形でした。 therecipe/qt therecipe/qt allows you to write Qt applications entirely in Go or JavaScript. Qt Creatorなるものがあるようで、デザイン部分を切り離せる印象はあるものの、最新のPCでもビルドに時間がかかるようで、学習コストもかかるという記事を見かけて断念しました。 どうしたものかとツイートしましたら、下記のようにご助言をいただいた。 同じ課題に対し色々試した結果、PWAのフルキャッシュドに落ち着いた。中身はGo+WASMで。 https://t.co/e60whDTV16 — のぼのぼ📡 (@nobonobo) July 21, 2020 PWA 早速調べてみました。Googleが進めているプロジェクトで、ネイティブアプリのよ

Eclipseで一通り基本的なGitを使ってみる

備忘録的にまとめておきたいと思います。おかしな点があればご指摘いただければ幸いです。 目次 環境 プロジェクト作成~初コミットまで コミットの履歴&差分を見る 元に戻す ブランチについて ブランチを作成してみる ブランチを統合するには マージする Rebaseする ローカルリポジトリからプロジェクトを取り込む コミットしたメッセージの修正 環境 Eclipse IDE for Java Developers:Juno Service Release 1 Git:上記Eclipseのプリインストール版

Javaでprivateなfieldやmethodにアクセスする

JUnitでテストしてると、privateなフィールドにアクセスして、値を参照したりセットしたりしたくなるわけですが、よく使うのでメモしておきます。 例えば、次のような対象のクラスがあるとします。 public class ParentClass { private String hoge = "ParentClass!!"; public void dispMsg() { System.out.println("dispMsg:" + hoge); } private void privateDispMsg(String msg) { System.out.println("dispMsg:" + msg); } }