PhoneGapのストレージAPI_牙列缺损

22670 ワード

local Strage

一、紹介
1、Cookileという古いクライアントストレージ技術に代わるために、Html 5のWEB Storage Apiは2つのクライアントでデータベースをストレージする方法を提供した:localStorageとsessionStorage
2.sessionStorageは、同じセッション内のページにのみアクセスでき、セッションが終了するとデータも破棄されるセッション内のデータをローカルに格納するために使用されます.したがって、sessionStorageは永続的なローカルストレージではなく、セッションレベルのストレージにすぎません.
3、localStorageは、データを自発的に削除しない限り、永続化されたローカルストレージに使用されます.データは期限切れになりません.(ブラウザキャッシュをクリアしても無駄)
4、localStorageとsessionStorageはwindowオブジェクトからアクセスする

二、使用方法
1、setItem格納value
用途:valueをkeyフィールドに格納
用法:.setItem( key, value)
コード例:sessionStorage.setItem("key", "value");　　localStorage.setItem("site", "js8.in");
　　　　
2、getItem valueを取得する
用途:指定したkeyローカルに格納されている値を取得する
用法:.getItem(key)
コード例:var value=sessionStorage.getItem("key");　　var site = localStorage.getItem("site");

3、removeItem削除key
用途:指定したkeyローカルに格納されている値を削除する
用法:.removeItem(key)
コード例:sessionStorage.removeItem("key"); localStorage.removeItem("site");

4、clearはすべてのkey/valueをクリアする
用途:すべてのkey/valueをクリア
用法:.clear()
コード例:sessionStorage.clear(); localStorage.clear();
　　
5、その他の操作方法:ポイント操作と[]
Web Storageは,独自のsetItem,getItemなどの方法でアクセスできるだけでなく,通常のオブジェクトのようにポイント(.)オペレータ、および[]は、次のコードのようにデータを格納します.

var storage = window.localStorage;



storage.key1 = "hello";



storage["key2"] = "world";



console.log(storage.key1);



console.log(storage["key2"]);

　　　
6、localStorageとsessionStorageのkeyとlength属性実現遍歴
sessionStorageおよびlocalStorageが提供するkey()およびlengthは、次のコードのような格納されたデータの遍歴を容易に実現することができる.

var storage = window.localStorage;



for (var i=0, len = storage.length; i < len; i++){



　　var key = storage.key(i);



　　var value = storage.getItem(key);



　　console.log(key + "=" + value);



}

<!DOCTYPE html> 

<html>

<head>

<meta charset="utf-8">

<title>jQuery  Mobile  Web     </title>

<link href="../jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>

<script src="../jquery.js" type="text/javascript"></script>



<script src="../jquery.mobile-1.3.2.js" type="text/javascript"></script>



<script type="text/javascript">

    $(document).ready(function(){

            //document.addEventListener("deviceready", myDeviceReadyListener, false);

            myDeviceReadyListener()    

    });    

    function myDeviceReadyListener(){

    

        var ls = window.localStorage;

        

        //  localstorage

        ls.setItem('name','   ');

        ls.setItem('age','50');

        ls.setItem('sex',' ');

        ls.setItem("username","phonegap100");

        ls.setItem("password","phonegap100");

        

        //  localstorage,      

        ls.getItem("name");

        ls.getItem("age");

        ls.getItem("sex");

        ls.getItem("username");

        ls.getItem("password");

    }

</script>

</head> 

<body>

<div data-role="page" id="indexPage">

    <div data-role="header">

        <h1>phonegap100.com</h1>

    </div>

    <div data-role="content">        

                

    </div>

    <div data-role="footer">

        <h4>phonegap   </h4>

    </div>

</div>



</body>

</html>

しかし、こう書くと、プログラムを実行するたびに1回書くので、いくつかの判断を加えるべきです.

<!DOCTYPE html> 

<html>

<head>

<meta charset="utf-8">

<title>jQuery  Mobile  Web     </title>

<link href="../jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>

<script src="../jquery.js" type="text/javascript"></script>



<script src="../jquery.mobile-1.3.2.js" type="text/javascript"></script>



<script type="text/javascript">

    $(document).ready(function(){

            //document.addEventListener("deviceready", myDeviceReadyListener, false);

            myDeviceReadyListener()    

    });    

    function myDeviceReadyListener(){

    

        var ls = window.localStorage;

        

        var name='';

        

        if(ls.getItem("name")){

            name=ls.getItem("name");

        }else{

            var services_name='  '; //                   

            name=services_name;

            ls.setItem('name',name);

        }

        

        ls.removeItem("name");//      

        

        

        ls.clear();

    }

</script>

</head> 

<body>

<div data-role="page" id="indexPage">

    <div data-role="header">

        <h1>phonegap100.com</h1>

    </div>

    <div data-role="content">        

                

    </div>

    <div data-role="footer">

        <h4>phonegap   </h4>

    </div>

</div>



</body>

</html>

html 5-Mark要素テクニック

モバイル端末ブラウザ初期設定apple-mobile-web-app-capable