localstorageのドメイン間ストレージスキーム

html 5規格のハイライトの一つは、ブラウザのローカルストレージ機能を提供することです.方法は2種類あります.localStorageとsessionStorageです.クッキーに対して、彼らは記憶空間が大きいという特徴を持っており、一般的には5 M程度を記憶することができるが、クッキーは一般的に4 kしか記憶していない.
localStorageとsessionStorageの主な違いは、localStorageのライフサイクルが永続的であることです.アクティブにクリアしないと、格納されたデータが保存されることを意味します.一方、sessionStorageは、名前の通りsessionのデータストレージであり、ライフサイクルは現在のウィンドウであり、ウィンドウが閉じると、格納されたデータは空になります.
もちろん双子の兄弟として、両者にも同じ点がたくさんあります.例えば、データへのアクセス方法は同じです.

#localStorage sessionStorage     ：
#     ： setItem(key,value);
#     ： getItem(key);
#     ： removeItem(key);
#       ： clear();
#      （   ）： key(index);
#        ： length;

#localStorage      
localStorage.age = 88; //  localStorage          
localStorage.setItem("animal","cat"); //     setItem         animal，  cat   
var animal = localStorage.getItem("animal"); //         animal   ，      animal
console.log(animal);  
localStorage.removeItem("animal"); //      
localStorage.clear(); //      

#sessionStorage      
sessionStorage.work = "police";
sessionStorage.setItem("person", "Li Lei");
var person = sessionStorage.getItem("person");
console.log(person);

また、異なるブラウザではlocalStorageとsessionStorageの情報を共有できません.同じブラウザの同じドメイン名とポートの異なるページ間で同じlocalStorageを共有できますが、異なるページ間ではsessionStorageの情報を共有できません.ここで注意しなければならないのは、ページがトップウィンドウのみを指し、1つのページに複数のiframeが含まれ、同源ページに属している場合、sessionStorageを共有することができます.実際の開発過程で最も多くの問題に直面したのはlocalStorageの同源戦略の問題である.この問題を理解するために、私たちはまず何が同源戦略なのかを明らかにしなければなりません.同源ポリシー(same-origin policy)は、ブラウザが実行するセキュリティ措置であり、ユーザー情報のセキュリティを保証し、悪意のあるサイトがデータを盗むことを防止することを目的としている.ブラウザの同源ポリシーは次のとおりです.
URL
説明
通信を許可するかどうか
http://www.a.com/a.js http://www.a.com/b.js
同じドメイン名の下
許可する
http://www.a.com/lab/a.js http://www.a.com/script/b.js
同じドメイン名の下で異なるフォルダ
許可する
http://www.a.com:8000/a.js http://www.a.com/b.js
同じドメイン名、異なるポート
許可しない
http://www.a.com/a.js https://www.a.com/b.js
同じドメイン名、異なるプロトコル
許可しない
http://www.a.com/a.js http://70.32.92.74/b.js
ドメイン名とドメイン名対応ip
許可しない
http://www.a.com/a.js http://script.a.com/b.js
プライマリドメインが同じで、サブドメインが異なる
許可しない
http://www.a.com/a.js http://file.a.com/b.js
同じドメイン名、異なる2級ドメイン名(同上)
許可されていません(クッキーの場合はアクセスも許可されていません)
http://www.cnblogs.com/a.js http://www.a.com/b.js
異なるドメイン名
許可しない
localStorageのデータは、異なるソースで共有できません.しかし、実際の開発ではこのようなニーズに直面することがよくありますが、私たちはどのように解決すればいいのでしょうか.
現在広く採用されているのはpostMessageとiframeを組み合わせた方法である.postMessage(data,origin)メソッドでは、異なるソースからのスクリプトが非同期で通信でき、テキスト・アーカイブ、マルチウィンドウ、ドメイン間メッセージングを実現できます.2つのパラメータを受け入れます.

data:転送するデータ、HTML 5仕様ではこのパラメータはJavaScriptの任意の基本タイプまたはコピー可能なオブジェクトであってもよいが、すべてのブラウザが任意のタイプのパラメータをサポートするわけではなく、一部のブラウザでは文字列パラメータしか処理できないため、パラメータを転送する際にJSONを使用する必要がある.stringify()メソッドは、オブジェクトパラメータをシーケンス化します.

origin:文字列パラメータ、ターゲットウィンドウのソースを示す、プロトコル+ホスト+ポート番号[+URL]、URLは無視されるので書かなくても良い、ただ安全のためにpostMessage()メソッドはメッセージのみを指定ウィンドウに渡す、もちろんパラメータを「*」に設定して任意のウィンドウに渡すことができる、現在のウィンドウと同じソースを指定する場合は「/」に設定します.

具体例:http://www.test.com/index_a.html

    
    


    
Status
    
     index_b  の