H5のLocalStorageのローカルストレージ使用量の詳細説明-H5 チュートリアル-php.cn

今回は、H5 の LocalStorage ローカルストレージの使用方法について詳しく説明します。LocalStorage ローカルストレージを使用する際の注意事項は何ですか?実際のケースを見てみましょう。

ローカルストレージについて言えば、HTML5 のポイントに到達するまでに、これまでの経緯は大まかに以下の図に示されているとおりです。

最も初期の Cookie の主な問題は、Cookie が小さすぎることです (約 4KB)。IE6 はドメイン名ごとに 20 Cookie しかサポートしておらず、少なすぎます。利点はみんながサポートしてくれることで、サポートがかなり充実していることです。過去に

javascript を無効にしたユーザーが存在しなくなったのと同じように、昔に Cookie を無効にしたユーザーも徐々に消えていきました。

userData は IE のもの、ゴミです。現在最も一般的に使用されているのは Flash で、Cookie の 25 倍の容量があり、基本的にはこれで十分です。その後、Google は Gears を開始しました。制限はありませんが、不快な点は、追加のプラグインをインストールする必要があることです (詳しくは調べていません)。 HTML5 では、これらは Web サイトごとに 5MB に統一されており、これは非常に大きいですが、いくつかの

文字列を保存するだけで十分です。奇妙なのは、現在サポートされているすべてのブラウザが 5MB を使用していることです。一部のブラウザではユーザーが設定できるようになっていますが、Web ページ制作者にとっては、現在の状況では 5MB を考慮する方が適切です。

IE のサポート状況は上記の通りで、非常に予想外です。ただし、IE と Firefox をテストする場合は、

ファイルをサーバー (またはローカルホスト) にアップロードする必要があることに注意してください。ローカル HTML ファイルを直接クリックしても機能しません。最初のステップは、ブラウザがローカルストレージをサポートしているかどうかを確認することです。 HTML5 では、ローカルストレージは、localStorage と

session

Storage を含むウィンドウの属性です。前者は常にローカルに存在し、後者はセッションにのみ付属します。閉店しました、なくなってしまいました。 2 つの使い方はまったく同じです。ここでは localStorage を例に挙げます。

if(window.localStorage){
 alert('This browser supports localStorage');
}else{
 alert('This browser does NOT support localStorage');
}

ログイン後にコピー

データを保存する方法は、window.localStorage.a や window.localStorage["a"] などの属性を window.localStorage に直接追加することです。その読み取り、書き込み、および削除の操作メソッドは非常に単純で、次のようなキーと値のペアの形式で存在します。

localStorage.a = 3;//设置a为"3"
localStorage["a"] = "sfsf";//设置a为"sfsf"，覆盖上面的值
localStorage.setItem("b","isaac");//设置b为"isaac"
var a1 = localStorage["a"];//获取a的值
var a2 = localStorage.a;//获取a的值
var b = localStorage.getItem("b");//获取b的值
localStorage.removeItem("c");//清除c的值

ログイン後にコピー

ここで最も推奨されるものは、当然、キーと値のペアをクリアする getItem() と setItem() です。、removeItem()を使用します。すべてのキーと値のペアを一度にクリアしたい場合は、clear() を使用できます。さらに、HTML5 には key() メソッドも用意されており、次のように、どのようなキー値があるかわからないときに使用できます:

var storage = window.localStorage;
function showStorage(){
 for(var i=0;i<storage.length;i++){
  //key(i)获得相应的键，再用getItem()方法获得对应的值
  document.write(storage.key(i)+ " : " + storage.getItem(storage.key(i)) + "<br>");
 }
}

ログイン後にコピー

ローカルストレージを使用する最も単純なカウンターを作成します:

var storage = window.localStorage;
if (!storage.getItem("pageLoadCount")) storage.setItem("pageLoadCount",0);
storage.pageLoadCount = parseInt(storage.getItem("pageLoadCount")) + 1;//必须格式转换
document.getElementByIdx_x("count").innerHTML = storage.pageLoadCount;
showStorage();

ログイン後にコピー

継続的に更新して確認してください。下の図に示すように、数値は少しずつ増加しています。

HTML5 ローカルストレージには文字列のみを保存できることに注意してください。どの形式で保存された場合でも、自動的に変換されます。文字列に変換するため、読み込む際には自分で型変換を行う必要があります。これが、前のコードで parseInt を使用する必要がある理由です。

また、iPhone/iPadでsetItem()を設定すると、時々奇妙なQUOTA_EXCEEDED_ERRエラーが発生することがあります。この場合、通常はsetItemの前にremoveItem()を実行しても問題ありません。

HTML5 のローカルストレージは、キーと値のペアの変更を監視できるストレージイベントも提供します。使用方法は次のとおりです。

if(window.addEventListener){
 window.addEventListener("storage",handle_storage,false);
}else if(window.attachEvent){
 window.attachEvent("onstorage",handle_storage);
}
function handle_storage(e){
 if(!e){e=window.event;}
 //showStorage();
}

ログイン後にコピー

イベント変数 e の場合、これは StorageEvent オブジェクトであり、いくつかの実用的な属性を提供し、次のことが可能です。次の表に示すように、キーと値のペアの変更を観察するとよいでしょう。

物件	タイプ	説明
鍵	文字列	追加、削除、または変更された名前付きキー
古い価値	どれでも	以前の値(現在は上書きされています)、または新しい項目が追加された場合は null
新しい価値	どれでも	新しい値、または項目が追加された場合は null
URL/うり	文字列	この変更をトリガーしたメソッドを呼び出したページ

这里添加两个键值对a和b，并增加一个按钮。给a设置固定的值，当点击按钮时，修改b的值：


You have viewed this page 0  time(s).

<script>
var storage = window.localStorage;
if (!storage.getItem(&quot;pageLoadCount&quot;)) storage.setItem(&quot;pageLoadCount&quot;,0);
storage.pageLoadCount = parseInt(storage.getItem(&quot;pageLoadCount&quot;)) + 1;//必须格式转换
document.getElementByIdx_x(&quot;count&quot;).innerHTML = storage.pageLoadCount;
showStorage();
if(window.addEventListener){
 window.addEventListener("storage",handle_storage,false);
}else if(window.attachEvent){
 window.attachEvent("onstorage",handle_storage);
}
function handle_storage(e){
 if(!e){e=window.event;}
 showObject(e);
}
function showObject(obj){
 //递归显示object
 if(!obj){return;}
 for(var i in obj){
  if(typeof(obj[i])!="object" || obj[i]==null){
   document.write(i + " : " + obj[i] + "<br/>");
  }else{
   document.write(i + " : object" + "<br/>");
  }
 }
}
storage.setItem("a",5);
function changeS(){
 //修改一个键值，测试storage事件
 if(!storage.getItem("b")){storage.setItem("b",0);}
 storage.setItem('b',parseInt(storage.getItem('b'))+1);
}
function showStorage(){
 //循环显示localStorage里的键值对
 for(var i=0;i<storage.length;i++){
  //key(i)获得相应的键，再用getItem()方法获得对应的值
  document.write(storage.key(i)+ " : " + storage.getItem(storage.key(i)) + "<br>");
 }
}
</script>

ログイン後にコピー

测试发现，目前浏览器对这个支持不太好，仅iPad和Firefox支持，而且Firefox支持得乱糟糟，e对象根本没有那些属性。iPad支持非常好，用的是e.uri（不是e.url），台式机上的Safari不行，诡异。

目前浏览器都带有很好的开发者调试功能，下面分别是Chrome和Firefox的调试工具查看LocalStorage：

另外，目前javascript使用非常多的json格式，如果希望存储在本地，可以直接调用JSON.stringify()将其转为字符串。读取出来后调用JSON.parse()将字符串转为json格式，如下所示：

var details = {author:"isaac","description":"fresheggs","rating":100};
storage.setItem("details",JSON.stringify(details));
details = JSON.parse(storage.getItem("details"));

ログイン後にコピー

JSON对象在支持localStorage的浏览器上基本都支持，需要注意的是IE8，它支持JSON，但如果添加了如下的兼容模式代码，切到IE7模式就不行了（此时依然支持localStorage，虽然显示window.localStorage是[object]，而不是之前的[object Storage]，但测试发现getItem()、setItem()等均能使用）。

<meta content="IE=7" http-equiv="X-UA-Compatible"/>

ログイン後にコピー

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！