ウェブストレージの使い方

今回はWeb Storageの使い方とWeb Storageを使用する際の注意点を紹介します。実際の事例を見てみましょう。

localStorage-----sessionStorage

Web Storageの特徴:

1. Key-Value型の単純な保存形式

2. 他の通常のJavaScriptと組み合わせることができます。オブジェクト 読み取りおよび書き込み操作は同じ形式で実行されます

3. 大容量 -- > 5M (Cookie と比較して) -- (Cookie はわずか 4KB で、リクエストの送信時に持ち込まれるため、速度)

4. 同じソースから来た場合にのみアクセスできます

以下では例として localStorage を使用します----》sessionStorage と localStorage は基本的に同じですが、sessionStorage はセッションが終了し、ウィンドウを閉じると消えます。ただし、localStorage はローカルに保存されているデータです。プログラムまたは手動で削除しない限り、データは失われません。

通常の JavaScript オブジェクトと同様に、ドット (.) 操作と [ ] 括弧操作を使用してプロパティにアクセスできます。

例: localStorage.setItem("foo","1") localStorage.foo="1" localStorage["foo"]="1"

よく使用される API: setItem()、getItem( ） 、 クリア（）。

オブジェクトを保存するとき、読み書きする場合、オブジェクトをJSONstringに変換して保存する必要があり、JSON.stringify(obj)とJSON.parse(str)

の2つの関数が導入されます例: var obj={x:1,y:2} ストレージ: localStorage.obj=JSON.stringify(obj)、読み取り: var obj2=localStorage.parse(localStorage.obj)。

データ列挙: 1. key メソッドと length 属性によるトラバーサル 2. for in traversal

1: for (var i=0;i

2：for (localStorage の var key){ if(localStorage.hasOwnProperty(key)){var value= localStorage[key] ; console.log(key+":"+value);} }

ストレージイベント

特定のウィンドウでWebストレージのデータを変更した後、さらに外側のすべてのウィンドウウィンドウがストレージ イベントをトリガーします。

window.addEventListener('storage',function(event){ console.log(event.key) }.false);

以下は、一般的に使用されるいくつかのイベント イベント オブジェクトのプロパティです。

key(更新されたキー名)、oldValue(更新前の値)、newValue(更新後の値)、url(更新されたページのURL)

Namespace Management-- --localStorageのデータが自動的に消えるため間違っていて、むやみに多くの属性を追加すると、その後の管理が非常に困難になります。名前空間を通じて管理できます。

	var serviceName="SERVICENAME",storage=null;
	//通过load事件读取数据至本地变量
	window.onload=function(){
		try{
			storage=JSON.parse(localStorage[serviceName] || '{}');
		}catch{
			storage={};
		}
	}
	//通过onbeforeunload时间将数据写入localStorage
	window.onbeforeunload=function(){
		localStorage[serviceName]=JSON.stringify(storage)
	}
1. localStorage のデータをローカル変数 storage に書き込むと、localStorage のアクセス速度よりもはるかに高速になります。 
2. 属性名の競合を避けるために、異なるページまたは異なるモジュールには異なる serviceName が付けられます
3. ページは localStorage の読み取りと書き込みを 1 回だけ行うため、そのページでストレージ イベントをトリガーすることはできません。したがって、必要に応じて、localStorage データを更新したり、他のタブからデータを同期したりするメソッドをカプセル化する必要があります。 
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 
推奨読書: 
ソース CSS3 を使用してリング読み込み進行状況バーを実装する方法

JS オブジェクトのプロパティとメソッドにアクセスする方法
以上がウェブストレージの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。