HTML5 用の 5 つのクライアント側オフライン ストレージ ソリューション_PHP チュートリアル

HTML5 用の 5 つのクライアント側オフライン ストレージ ソリューション

最近、HTML5 ゲームにはオフライン ストレージ機能が必要なので、現在利用可能ないくつかの HTML5 ストレージ方法を研究し、それぞれを使用して HT for Web に基づいた包括的な例を作成しました。オフライン ストレージ メソッドである Cookie、WebStorage、IndexedDB、および FileSystem は、ガス監視システムのメーターの位置、向き、スイッチ、およびメーター値に対する CURD アクセス操作を実行するために使用されました。

http://www.hightopo.com/guide/guide/core/serialization/examples/example_exportimport.html

HTML5 にも Web SQL Database メソッドがあり、ブラウザーでサポートされていますが、これが唯一のリレーショナルです。ただし、W3C はメンテナンスと開発を停止しているため、ここでは紹介しません: この仕様は現在メンテナンス中ではなく、Web アプリケーション ワーキング グループはそれをさらにメンテナンスするつもりはありません。例全体は主に、HT for Web の DataModel データ モデル情報をシリアル化および逆シリアル化することです。このプロセスは非常に簡単です。 dataModel.serialize() を使用してモデルを JSON 文字列にシリアル化し、 dataModel.deserialize(jsonString ) を使用してデータ モデルを逆シリアル化します。 JSON 文字列メモリはモデル情報を生成し、ストレージは主に JSON 文字列で動作します。

まず、最も単純なストレージ メソッドである LocalStorage を紹介します。コードは次のとおりです。これは、ほとんど説明を必要としない単純なキーと値のペアのストレージ構造です。localStorage には、このための sessionStorage メソッドもあります。詳細については、http://www.w3.org/TR/webstorage/

functionsave(dataModel){varvalue=dataModel.serialize();window.localStorage['DataModel']=value;window.localStorage['DataCount']=dataModel.size();console.log(dataModel.size()+'datasaresaved');returnvalue;}functionrestore(dataModel){varvalue=window.localStorage['DataModel'];if(value){dataModel.deserialize(value);console.log(window.localStorage['DataCount']+'datasarerestored');returnvalue;}return'';}functionclear(){if(window.localStorage['DataModel']){console.log(window.localStorage['DataCount']+'datasarecleared');deletewindow.localStorage['DataModel'];deletewindow.localStorage['DataCount'];}}

を参照してください。この場合、最も古い保存方法は Cookie です。 、 1 つの画像要素の情報しか保存できません。この保存方法は、保存内容が非常に限られており、完全性を導入するために、単純な情報保存にのみ適しています。 HTML5 ストレージ ソリューション、ちなみにリストします:

functiongetCookieValue(name){if(document.cookie.length>0){varstart=document.cookie.indexOf(name+"=");if(start!==-1){start=start+name.length+1;varend=document.cookie.indexOf(";",start);if(end===-1){end=document.cookie.length;}returnunescape(document.cookie.substring(start,end));}}return'';}functionsave(dataModel){varvalue=dataModel.serialize();document.cookie='DataModel='+escape(value);document.cookie='DataCount='+dataModel.size();console.log(dataModel.size()+'datasaresaved');returnvalue;}functionrestore(dataModel){varvalue=getCookieValue('DataModel');if(value){dataModel.deserialize(value);console.log(getCookieValue('DataCount')+'datasarerestored');returnvalue;}return'';}functionclear(){if(getCookieValue('DataModel')){console.log(getCookieValue('DataCount')+'datasarecleared');document.cookie="DataModel=;expires=Thu,01Jan197000:00:00UTC";document.cookie="DataCount=;expires=Thu,01Jan197000:00:00UTC";}}

現在の比較 実用的で強力なストレージ方法は、IndexedDB API で、構造オブジェクトを格納し、キーとインデックスのインデックス検索を構築できます。さまざまなブラウザが IndexedDB ストレージ メソッドを徐々にサポートしています。使用コードは次のとおりです。特に、クエリの実行時は、IndexedDB の多くの操作が非同期であることに注意してください。そのため、NodeJS のような同期コードほど使いやすくはありません。

request=indexedDB.open("DataModel");request.onupgradeneeded=function(){db=request.result;varstore=db.createObjectStore("meters",{keyPath:"id"});store.createIndex("by_tag","tag",{unique:true});store.createIndex("by_name","name");};request.onsuccess=function(){db=request.result;};functionsave(dataModel){vartx=db.transaction("meters","readwrite");varstore=tx.objectStore("meters");dataModel.each(function(data){store.put({id:data.getId(),tag:data.getTag(),name:data.getName(),meterValue:data.a('meter.value'),meterAngle:data.a('meter.angle'),p3:data.p3(),r3:data.r3(),s3:data.s3()});});tx.oncomplete=function(){console.log(dataModel.size()+'datasaresaved');};returndataModel.serialize();}functionrestore(dataModel){vartx=db.transaction("meters","readonly");varstore=tx.objectStore("meters");varreq=store.openCursor();varnodes=[];req.onsuccess=function(){varres=req.result;if(res){varvalue=res.value;varnode=createNode();node.setId(value.id);node.setTag(value.tag);node.setName(value.name);node.a({'meter.value':value.meterValue,'meter.angle':value.meterAngle});node.p3(value.p3);node.r3(value.r3);node.s3(value.s3);nodes.push(node);res.continue();}else{if(nodes.length){dataModel.clear();nodes.forEach(function(node){dataModel.add(node);});console.log(dataModel.size()+'datasarerestored');}}};return'';}functionclear(){vartx=db.transaction("meters","readwrite");varstore=tx.objectStore("meters");varreq=store.openCursor();varcount=0;req.onsuccess=function(event){varres=event.target.result;if(res){store.delete(res.value.id);res.continue();count++;}else{console.log(count+'datasarecleared');}};}

最後に、FileSystem API は、ローカル ファイルを操作するための保存方法に相当します。現在、サポートされているブラウザーは多くなく、そのインターフェース規格も開発および変更されています。たとえば、このコードを書いたときは、ほとんどの文献で使用されている webkitStorageInfo は、navigator.webkitPersistentStorage および navigator.webkitTemporaryStorage に置き換えられました。保存されたファイルは、URL ファイル システム:http://www.hightopo.com/persistent/meters.txt を介して Chrome ブラウザで見つけることができます。またはファイルシステム経由でも:http://www.hightopo.com/persistent/ はディレクトリ アクセスに似ているため、画像をローカル ファイルに動的に生成し、それを img の html 要素の src アクセスに直接割り当てることもできます。 filesystem の URL:http:*** なので、ローカル ストレージは新しい扉を開き、今後さらに奇妙で素晴らしいアプリケーションが登場すると信じています。

navigator.webkitPersistentStorage.queryUsageAndQuota(function(usage,quota){console.log('PERSISTENT:'+usage+'/'+quota+'-'+usage/quota+'%');});navigator.webkitPersistentStorage.requestQuota(2*1024*1024,function(grantedBytes){window.webkitRequestFileSystem(window.PERSISTENT,grantedBytes,function(fs){window.fs=fs;});});functionsave(dataModel){varvalue=dataModel.serialize();fs.root.getFile('meters.txt',{create:true},function(fileEntry){console.log(fileEntry.toURL());fileEntry.createWriter(function(fileWriter){fileWriter.onwriteend=function(){console.log(dataModel.size()+'datasaresaved');};varblob=newBlob([value],{type:'text/plain'});fileWriter.write(blob);});});returnvalue;}functionrestore(dataModel){fs.root.getFile('meters.txt',{},function(fileEntry){fileEntry.file(function(file){varreader=newFileReader();reader.onloadend=function(e){dataModel.clear();dataModel.deserialize(reader.result);console.log(dataModel.size()+'datasarerestored');};reader.readAsText(file);});});return'';}functionclear(){fs.root.getFile('meters.txt',{create:false},function(fileEntry){fileEntry.remove(function(){console.log(fileEntry.toURL()+'isremoved');});});}

Browser-Side的存储方式还在快速的发展中，其实除了以上几种外还有Application Cache，相信将来还会有新秀出现，虽然“云”是大趋势，但客户端并非要走极端的“瘦”方案，这么多年冒出了这么多客户端存储方式，说明让客户端更强大的市场需求是强烈的，当然目前动荡阶段苦逼的是客户端程序员，除了要适配Mouse和Touch，还要适配各种屏，如今还得考虑适配各种存储，希望本文能在大家选型客户端存储方案时有点帮助，最后上段基于HT for Web操作HTML5存储示例的视频效果：http://v.youku.com/v_show/id_XODUzODU2MTY0.html

http://www.hightopo.com/guide/guide/core/serialization/examples/example_exportimport.html

http://www.bkjia.com/PHPjc/1068088.htmlwww.bkjia.comtruehttp://www.bkjia.com/PHPjc/1068088.htmlTechArticleHTML5的五种客户端离线存储方案 最近折腾HTML5游戏需要离线存储功能，便把目前可用的几种HTML5存储方式研究了下，基于HT for Web写了个综合...