localStorage.getItem（ 'item'）はlocalStorage.itemまたはlocalStorage ['item']よりも優れていますか？

最近、LocalStorageについて質問しました。アイテムがまだ設定されていないときに使用JSON.parse(localStorage.item)してJSON.parse(localStorage['item'])いて、戻るために機能しNULLていませんでした。

しかし、JSON.parse(localStorage.getItem('item')うまくいきました。そして、それはJSON.parse(localStorage.testObject || null)また機能します。

コメントの1つは基本的にそれを言ってlocalStorage.getItem()おり、localStorage.setItem()常に優先されるべきです：

ゲッターとセッターは、LS apiを操作するための一貫性のある、標準化されたクロスブラウザー互換の方法を提供し、他の方法よりも常に優先されるべきです。-クリストフ

localStorageに省略形のドットとブラケットの表記を使用するのが好きになりましたが、他の人がこれを採用していることを知りたいです。localStorage.getItem（ 'item'）はlocalStorage.itemまたはlocalStorage ['item']よりも優れていますか、それともそれらが機能する限り、省略表記で問題ありませんか？

プロパティへの直接アクセス（localStorage.itemまたはlocalStorage['item']）と機能インターフェイスの使用（localStorage.getItem('item')）の両方が正常に機能します。どちらも標準であり、クロスブラウザと互換性があります。^*仕様によると：

Storageオブジェクトでサポートされているプロパティ名は、オブジェクトに関連付けられたリストに現在存在する各キーと値のペアのキーであり、キーが最後にストレージ領域に追加された順序になっています。

要求された名前のキーと値のペアが見つからない場合は、動作が異なります。キーは、たとえば、'item'存在しない、var a = localStorage.item;もたらすaことundefinedながら、var a = localStorage.getItem('item');もたらすa値を有しますnull。あなたが発見したように、undefinedそしてnullJavaScript / EcmaScriptでは互換性がありません。:)

編集：クリストフが彼の答えで指摘しているように、関数型インターフェースは、の事前定義されたプロパティに等しいキーの下で値を確実に格納および取得する唯一の方法ですlocalStorage。（これらの6がありますlength、key、setItem、getItem、removeItem、とclear。）ので、例えば、以下は常に仕事：

localStorage.setItem('length', 2);
console.log(localStorage.getItem('length'));

特に、最初のステートメントはプロパティに影響を与えないことに注意してくださいlocalStorage.length（キーが'length'まだにない場合はおそらくインクリメントすることを除いてlocalStorage）。この点で、仕様は内部的に一貫していないようです。

ただし、以下はおそらくあなたが望むことをしないでしょう：

localStorage.length = 2;
console.log(localStorage.length);

興味深いことに、1つ目はChromeでの操作なしですが、Firefoxでの機能呼び出しと同義です。2番目は、に存在するキーの数を常にログに記録しますlocalStorage。

^* _{これは、そもそもWebストレージをサポートするブラウザに当てはまります。（これには、ほとんどすべての最新のデスクトップおよびモバイルブラウザーが含まれます。）Cookieまたはその他の手法を使用してローカルストレージをシミュレートする環境では、動作は使用されるシムによって異なります。以下のためのいくつかのpolyfillsをlocalStorage見つけることができるここに。}

質問はすでにかなり古いですが、私は質問で引用されているので、私の発言について2つの言葉を言うべきだと思います。

ストレージオブジェクトはかなり特殊で、キーと値のペアのリストへのアクセスを提供するオブジェクトです。したがって、それは通常のオブジェクトや配列ではありません。

たとえば、長さ属性があります。これは、配列の長さ属性とは異なり、読み取り専用であり、ストレージ内のキーの数を返します。

配列を使用すると、次のことができます。

var a = [1,2,3,4];
a.length // => 4
a.length = 2;
a // => [1,2]

ここに、ゲッター/セッターを使用する最初の理由があります。というアイテムを設定したい場合はどうなりlengthますか？

localStorage.length = "foo";
localStorage.length  // => 0
localStorage.setItem("length","foo");
// the "length" key is now only accessable via the getter method:
localStorage.length  // => 1
localStorage.getItem("length") // => "foo"

Storageオブジェクトの他のメンバーでは、書き込み可能であり、のようなメソッドを誤って上書きする可能性があるため、さらに重要ですgetItem。APIメソッドを使用すると、これらの考えられる問題を防ぎ、一貫したインターフェースを提供します。

また、興味深い点は、仕様の次の段落です（私が強調しています）。

setItem（）メソッドとremoveItem（）メソッドは、失敗に関してアトミックである必要があります。失敗した場合、メソッドは何もしません。つまり、データ記憶域への変更が成功するか、データ記憶域がまったく変更されないようにする必要があります。

理論的には、ゲッター/セッターと[]アクセスの間に違いはないはずですが、あなたは決して知りません...

私はそれが古い投稿であることを知っていますが、実際にパフォーマンスについて言及した人は誰もいないので、それをベンチマークするためにいくつかのJsPerfテストを設定し、一貫性のあるインターフェイスでgetItemあり、setItemドット表記やブラケットを使用するよりも一貫して高速であり、読みやすくなっています。

これがJsPerfでの私のテストです

すでに述べたように、存在しないキーを除いてほとんど違いはありません。パフォーマンスの違いは、異なるブラウザ/ OSを使用しているものに応じて。しかし、それは実際にはそれほど違いはありません。

標準のインターフェースを使用することをお勧めします。それが推奨される使用方法だからです。