Webストレージ、アプリケーションキャッシュ、Web workers

3739 ワード

クライアントストレージデータ

の2つの方法:

localStorage-時間制限のないデータストレージ

ストレージの特徴:localStorageメソッドに格納されるデータには時間制限がありません.翌日、2週目または翌年以降もデータは使用可能です.

sessionStorage-1つのsessionに対するデータストレージ

ストレージの特徴:sessionStorageメソッドは1つのsessionに対してデータストレージを行い、ユーザーがブラウザを閉じた後、データは

削除される.

はcookieと比較します:以前、これらはすべてcookieによって完成しました.しかし、cookieは、サーバに対する要求ごとに伝達されるため、大量のデータの記憶に適していない.これにより、cookieの速度が遅く、効率も高くない

である.

コードの例




    
    Document


        <button id="btn">save</button>
    <script>
        var ta=document.querySelector('#ta'),
            btn=document.querySelector('#btn');
        if(localStorage.text){
            ta.value=localStorage.text;
        }
        btn.onclick=function(){
            localStorage.text=ta.value;
        }
    </script>


</code></pre> 
 <h2> </h2> 
 <ol> 
  <li> :<br/> HTML5 , web , </li> 
  <li> :</li> 
 </ol> 
 <ul> 
  <li> - </li> 
  <li> - </li> 
  <li> - </li> 
 </ul> 
 <ol start="3"> 
  <li> :<br/>  , manifest <br/> manifest :".appcache"</li> 
  <li>Manifest  :</li> 
 </ol> 
 <ul> 
  <li>CACHE MANIFEST- </li> 
  <li>NETWORK- , </li> 
  <li>FALLBACK- ( 404 )</li> 
 </ul> 
 <h4> :</h4> 
 <p> :index.html</p> 
 <pre><code>


    <meta charset="UTF-8"/>
    <title/>
    <link href="style.css" rel="stylesheet" type="text/css"/>


    <h1 class="h1">Hello HTML5!</h1>


</code></pre> 
 <p> :index.appcache</p> 
 <pre><code>CACHE MANIFEST

CACHE:
index.html
index.js

NETWORK:
style.css
</code></pre> 
 <p> chrome index.html index.html index.js , style.css 。</p> 
 <h2>web workers</h2> 
 <ol> 
  <li> Web Worker?<br/> web worker JavaScript, , </li> 
  <li> :<br/> postMessage()- HTML <br/> terminate()- web worker, / </li> 
  <li> :<br/> onmessage</li> 
 </ol> 
 <h4> </h4> 
 <p> :index.html</p> 
 <pre><code>


    <meta charset="UTF-8"/>
    <title/>
    <script src="index.js"/>


    <div id="numDiv">0</div>
    <button id="start">start</button>
    <button id="stop">stop</button>


</code></pre> 
 <p> :index.js</p> 
 <pre><code>var numDiv;
var work = null;

window.onload = function(){
    numDiv = document.getElementById("numDiv");

    document.getElementById("start").onclick = startWorker;
    document.getElementById("stop").onclick = function(){
        if(work){
            work.terminate();
            work = null;
        }
    }
}

function startWorker(){
    if(work){
        return;
    }
    work = new Worker("count.js");
    work.onmessage = function(e){
        numDiv.innerHTML = e.data;
    }
}
</code></pre> 
 <p> :count.js</p> 
 <pre><code>var countNum = 0;
function count(){
    postMessage(countNum);
    countNum++;
    setTimeout(count,1000);
}

count();
</code></pre> 
 <p> :cllgeek <br/> github:cll</p> 
</article>
                            </div>
                        </div>

RcFileストレージと読み込み操作

SharedPreferencesUtil