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

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文を作成して表示しています。

コメント

このブログの人気の投稿

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); } }

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の高速化メモ

Eclipseが重いと一言に言っても、いろいろな工程での話があると思いますが、過去記事のなども含めてこの記事にピックアップしておきたいと思います。以下はWindows環境での話です。