前言
Webストレージ技術は初期にHTML 5の一部として定義されていた.後に独立して独立の基準とされた.Webストレージ規格は、localStorageオブジェクトとsessionStorageオブジェクトを含む.この2つのオブジェクトは、実際には永続化された関連配列であり、名前値ペアのマッピングテーブルであり、名前と値は文字列です.Webストレージは使いやすく、大容量(無限ではない)データストレージをサポートし、現在のすべての主流ブラウザと互換性があります.Webストレージテクノロジーにより、一部のローカルアプリケーションのデータストレージをより便利にすることができます.
紹介する
Web Storageの目的は、クッキーによってもたらされるいくつかの制限を克服することであり、データがクライアントに厳格に制御される必要がある場合、データをサーバに継続的に送り返す必要はありません.Web Storageの2つの主な目的は、クッキーの外にセッションデータを格納する方法と、セッションにまたがって存在するデータを大量に格納するメカニズムを提供することです.
Web Storageは、sessionStorageとlocalStorageの2つに分類されます.sessionStorageに保存されたデータはブラウザのセッションに使用され、セッションが終了すると(通常はウィンドウが閉じる)、データが空になります.localStorageに保存されているデータは長期にわたって存在し、次回このサイトにアクセスする際には、以前保存していたデータを直接Webページで読み取ることができます.保存期間の長さの違いを除いて、この2つのオブジェクトの属性と方法はまったく同じです.
クッキーメカニズムの強化版に似ており、より大きなストレージスペースを使用することができます.現在、ドメイン名ごとのストレージ上限はブラウザによって異なり、Chromeは2.5 MB、FirefoxとOperaは5 MB、IEは10 MBである.ここで、Firefoxのストレージスペースは1級ドメイン名で決定されますが、他のブラウザではこの制限はありません.つまりFirefoxではa.example.comとb.example.comは5 MBのストレージスペースを共有します.また、Cookieと同様に、同ドメインによって制限されています.あるページに格納されたデータは,同ドメインの下のページのみが読み取ることができる.
WindowsオブジェクトにsessionStorageとlocalStorageのプロパティが含まれているかどうかを確認することで、ブラウザが両方のオブジェクトをサポートしているかどうかを確認できます. ：IE storage。
きほんそうさ
ストレージデータ
sessionStorageとlocalStorageで保存されているデータは、いずれも「キーペア」として存在します.すなわち,各データにはキー名と対応する値がある.すべてのデータはテキスト形式で保存されます.
注意:Storageタイプには文字列のみが格納されます.文字列以外のデータは、格納する前に文字列に変換されます.
1、setItem()setItem()メソッドでデータを格納できます.2つのパラメータを受け入れます.1つ目のパラメータはキー名で、2つ目のパラメータはキー値、つまり保存されたデータです. ， ， storage ， 。

sessionStorage.setItem("key","value");
localStorage.setItem("key","value");

2、getItem()getItem()メソッドでデータを読み込むことができます.パラメータを受け入れます.キー名です.

var valueSession = sessionStorage.getItem("key");
var valueLocal = localStorage.getItem("key");

3、属性操作の形式でデータにアクセスするにはsetItem()とgetItem()の方法のほか、属性操作の形式でデータを操作することもできる.

localStorage.setItem("key1","value1");
localStorage.testkey = 'testvalue';
console.log(localStorage.getItem('testkey'));//'testvalue'
console.log(localStorage.key1);//'value1'

データの消去
1.removeItem()removeItem()メソッドは、キー名に対応するデータを消去するために使用されます. ： ，

sessionStorage.removeItem('key');
localStorage.removeItem('key');

removeItem()メソッドを使用するほか、delete操作を使用してデータを消去することもできる. ：IE7- delete storage

localStorage.setItem("key1","value1");
delete localStorage.key1;
console.log(localStorage.key1);//undefined
console.log(localStorage.getItem('key1'));//null

2、clear()clearメソッドは、保存されているすべてのデータを消去するために使用されます.

sessionStorage.clear();
localStorage.clear(); 

ループ操作
1、key()key(index)メソッドは、index位置の値の名前を返します.

sessionStorage.setItem("key1","value1");
sessionStorage.setItem("key2","value2");
console.log(sessionStorage.key(0));//'key1'
console.log(sessionStorage.key(1));//'key2'
console.log(sessionStorage.key(2));//null

2、length length属性はキー値ペアの個数を返します.

console.log(sessionStorage.length);//2

私たちはlengthとkeyを利用してすべてのキーを巡回することができます.

for(var i = 0; i < localStorage.length; i++){
    var key = localStorage.key(i);
    var value = localStorage.getItem(key);
}

for-inループを使用して反復することもできます.

for(var key in localStorage){
    var value = localStorage.getItem(key);
}

ストレージイベント
まず、このイベントはwindowオブジェクト上でのみ発生し、documentオブジェクト上で無効なトリガが発生し、DOM 0レベル、DOM 2レベルのイベント処理関数を使用してもよいことに注意してください.
sessionStorageまたはlocalStorageを操作すると、storageイベントがトリガーされます.このイベントは、プロパティまたはsetItem()メソッドでデータを保存し、deleteオペレータまたはremoveItem()を使用してデータを削除したり、clear()メソッドを呼び出したりすると発生します.
注意:ストレージ・イベントは、ストレージ・データが本当に変更された場合にのみトリガーされます.既存のストレージ・アイテムに同じ値を設定したり、もともと存在しないストレージ・アイテムを削除したりしても、ストレージ・イベントはトリガーされません.getItem()メソッドでデータを取得してもイベントはトリガーされません
一般に、storageイベントは、データの変化をもたらす現在のページでトリガーされません.ブラウザがドメイン名の下にある複数のページを同時に開くと、1つのページがsessionStorageまたはlocalStorageのデータを変更すると、他のすべてのページのstorageイベントがトリガーされ、元のページはstorageイベントをトリガーしません.このメカニズムにより、複数のウィンドウ間の通信を実現することができる
注意:IE 8-ブラウザはstorageイベントをサポートしていません.IE 9+ブラウザは他の標準ブラウザとは異なり、データの真実値が変化するかどうかにかかわらず、データを設定または削除するとイベントがトリガーされ、元のページと同じドメイン名の他のページがトリガーされます.
このイベントのeventオブジェクトには以下の属性がある.
url:イベントをトリガーするリンクアドレスkey:設定または削除されたキー名newvalue:設定値であれば新しい値;削除キーの場合null oldValue:キーが変更される前の値storageArea:イベントをトリガーするオブジェクトを返します
次に、イベントの適用例を示します.
a.html:

    
    
    
    


    
        
    
           ： 

        <button id="btn">    </button>
    <hr/>
    <iframe src="./b.html" frameborder="1" width="773" height="346"/>

<script>
    // let user_name = "zhangsan";
    let btn = document.getElementById('btn');
    btn.onclick = function() {
        //             
        let user_info = document.getElementById('txt1').value;
        //        
        localStorage.setItem('zhangsan-1',user_info);
    }
    
    window.onstorage = function () {
        console.log("hello,world!");
    };
</script>

</code></pre> 
 <p>b.html</p> 
 <pre><code>


    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>        </title>


    <script>
        window.onstorage = function (e) {
            var e = e || window.event;
            document.body.innerHTML = e.newValue;
        };
    </script>


</code></pre> 
</article>
                            </div>
                        </div>