HTML 5 localStorageとdocument.domain設定の問題

2289 ワード

localStorageの書き込みと読み取りは、サブドメインにまたがることはできません.そうしないと、一部のモバイルブラウザでは読み込めない場合があります.
最近、モバイル端末の再生記録機能を開発し、pc端末とandroid版のchromeテストに順調に合格したが、その後、マルチプラットフォームテストを行ったとき、悲劇が発生した.
localStorageの穴に落ちる
AndroidバージョンUC、iphone、ipad mini版のsafariでは、localStorageではページをまたいでデータが読めず、ブラウザを再起動してから正常にデータを読み取る必要があります.
localStorageの穴を這い出す
まず疑問なのはlocalStorageのアクセス方式の問題であり、書き込み方式は属性設定localStorageである.historyによる読み出しはapiの方式localStorageである.getItem,demo後にlocalStorageの3つのアクセスを確認しても問題ありません.
思考が短絡し、このページをまたいで読めない問題をどのように回避するかを考え始め、まずsessionStorageを試してみて、ブラウザの実行中にデータを「session」に保存して、後で同じ問題があることに気づいた.
ページにまたがって「ビッグデータ」を保存できる方法を考え続け、「霊光」が現れ、window.nameはページにまたがって保存できるはずなので、いろいろなデバイスを試してこのスキームが確実に実行できることを確認してみましたが、リスクはどのページでもこのnameを書き換える可能性があり、セキュリティの問題もあります.
シンプルなdemoテストでは、これらの問題のあるブラウザがlocalStorageをサポートしていることがわかりました.あきらめそうになった時、同僚が走ってきて、あるファイルをheadに繰り上げて、正常にデータを読み取ることができて、これはやっとプレーヤーの前置コードに表示されていない設定documentを意識しました.domainは、異なるdomainの下でlocalStorageの読み取りと設定を引き起こします.
localStorageのページメソッドを書き込む前に表示されなかった設定document.domain、デフォルト値はlabsです.wxnet.me、ただし、読み取ったページには、データを読み取る前に表示するdocumentが設定されている.domainはルートドメインwxnet.me
問題環境をdemoと抽象化する
データが書き込まれたページhttp://labs.wxnet.me/labs/writelocalstorage.html
//document.domain       labs.wxnet.me

localStorage['k'] = '{"a":"1"}';

document.domain = "wxnet.me";


 
データ読み出しページhttp://labs.wxnet.me/labs/readlocalstorage.html
document.domain = "wxnet.me";

alert(localStorage['k']);


  
ソリューション
localStorageのページを読み取り、設定するにはdocumentを統一する必要があります.domainは、設定をすべて表示しないか、ルートドメインに統一します.
ページの設定:
document.domain = "wxnet.me";

localStorage['k'] = '{"a":"1"}';


 
ページの読み込み:
document.domain = "wxnet.me";

alert(localStorage['k']);


  
考える
異なるモバイル版ブラウザはサブドメインの処理方式が異なり、iphone、ipad miniサブドメインの下に書き込まれ、メインドメインの下では読み取れません.ブラウザを再起動した後、このセキュリティポリシーを無視して、データを読むことができます.しかしipad、pc版のブラウザではこの問題は発見されなかった.