Hatena::ブログ(Diary)

himajin315の記録

2011-09-22

appMobi ローカルストレージ

急にPCが壊れて早3週間。。。
appMobiが復活しましたv( ̄Д ̄)v イエイ

ってことで久しぶりに書きます(ノ´∀`*)

今日書くのはローカルストレージについてです。


appMobiで作ったアプリ
作ったのはいいが、状態保存できないかなぁ〜
ローカルで保存できる方法ないかなぁ〜

う〜ん。。。(;´∀`)

ローカルストレージとは…
操作しているコンピュータに直接つながれたハードディスクなどの外部記憶装置。また、その中に設けられた特定のソフトウェアのためのデータ保存領域。

これだ!!!

という経緯でローカルストレージの勉強することになりました。

「え?ローカルストレージってあるの?」

いろいろ探してみると。。。Cookie が使える!!

Cookie使えば、できるんじゃね!?」

つまり、appMobiのローカルストレージCookieを使うことで実装可能となるのです(∩´∀`)∩ワーイ

でも実は…

HTML5にもローカルストレージという機能があるんですよ( ´ノД`)コッソリ
うまく動作しないとか何とか、、、やってないのでわかりません( ー`дー´)キリッ

【重要】誰か確かめてやったら教えてください(・∀・)←

さて、では実際にappMobiでCookieはどう使っているのか?

まず見てもらいたいのは demo.CookieManagement と言うアプリです。
f:id:himajin315:20110922211106p:image:w360

[add]してCookieを作成し、[delete]でクッキーモンスターCookieを消しちゃうってアプリ(・∀・)

面白いwww

そしてCookieを使う上でもっとも利用するアプリ(ノ´∀`*)

1.Cookieがちゃんと入ったのかの確認。
2.いらなくなったCookieの削除。
3.自分の手でCookieの追加。

などなど、、、このアプリを利用する機会がものすごーく増えるでしょう(≧ω≦。)プププ

あ、appMobiで使用されるCookieはすべて同じ所に保存されているので(どこかは知らない)アプリ一つ一つにCookieがあるわけではありません( ー`дー´)キリッ

では、早速このCookieManagemetのソースでどうやってCookieを追加、表示、削除をしているのかを見てみましょう!

<index.html>

419    <div style='position:absolute;top:190px;left:20px'>
420        <span class='categoryHead'>Cookie Value:&nbsp;</span>
421        <span class='categoryCopy' id='cookieValue'>&nbsp;</span>
422    </div>
423        <!-- delete button-->
424    <a style='position:absolute;top:258px;left:402px'onMouseOut="document.getElementById('imgDelete').src='delete_button_up.png'" onMouseUp="document.getElementById('imgDelete').src='delete_button_up.png'" onMouseDown="document.getElementById('imgDelete').src='delete_button_press.png'" onclick="deleteCookie();"><image id='imgDelete' src='delete_button_up.png'/></a><br>
425        <!-- add button-->
426    <a style='position:absolute;top:258px;left:582px' onMouseOut="document.getElementById('imgAdd').src='add_button_up.png'" onMouseUp="document.getElementById('imgAdd').src='add_button_up.png'" onMouseDown="document.getElementById('imgAdd').src='add_button_press.png'" onclick="addCookie();"><image id='imgAdd' src='add_button_up.png'/></a><br>

色々書いているけど、、、とりあえず、追加から!!
426行目のaddCookie();に注目。
この関数はどこにあるかというと、、、

182                function addCookie() {
183                        //add a cookie
184                        var name = prompt('Enter cookie name:');
185                        if( name.length == 0) return;
186                        var value = prompt('Enter cookie value:');
187                        var daysTillExpiry = prompt('Days until cookie expires (-1 fornever):');
188                        try
189                        {
190                                AppMobi.cache.setCookie(name,value,parseInt(daysTillExpiry));
191                        }
192                        catch(e)
193                        {
194                                alert("error in setCookie: " + e.message);
195                        }
196                        updateDropdown();
197                }

184〜187行目はname,value,daysTillExpiryに値を入れている。
大事なのは AppMobi.cache.setCookie(name,value,parseInt(daysTillExpiry));
とりあえず、APIで確認( ´∀`)bグッ!

f:id:himajin315:20110922221324p:image:w360

第1引数:ユニークな名前。
第2引数:データ
第3引数:保存期間

ってことですね。この3つの引数Cookieを追加することができます。

ふぅ…疲れてきたので削除と表示は省略しましょうかwww

(deleteCookie()関数)
204                      AppMobi.cache.removeCookie(name);
(showCookie()関数)
221                      AppMobi.cache.getCookie(selectedText);

まず cache.removeCookie から見てみようワーイヽ(゚∀゚)メ(゚∀゚)メ(゚∀゚)ノワーイ
f:id:himajin315:20110922224520p:image:w360
・登録されているCookieのユニークな名前を引数にすることで、そのCookieを削除できる。

次は cache.getCookie を見る!
f:id:himajin315:20110922224519p:image:w360
・登録されているCookieのユニークな名前を引数にすることで、value(データ)を取り出すことができる


え〜と、、、
一応この3つがあれば追加、削除、表示はできます!

AppMobi.cache.setCookie
AppMobi.cache.getCookie
AppMobi.cache.removeCookie
を使って、なにか作ってみようかね(ノシ`・ω・)ノシ バンバン

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/himajin315/20110922/1316693490
リンク元
Connection: close