web-dev-qa-db-ja.com

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'] ORよりも優れていますが、それらが機能する限り、省略表記は大丈夫ですか？

javascriptsyntaxlocal-storage
75
Mark Rummel

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

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

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

EDIT：Christophが 彼の答え で指摘しているように、キーの下で値を確実に保存および取得する唯一の方法は機能インターフェースです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);

興味深いことに、最初はChromeのノーオペレーションですが、Firefoxの関数呼び出しと同義です。 2番目は常にlocalStorageに存在するキーの数を記録します。

*これは、最初にWebストレージをサポートするブラウザーに当てはまります。 （これには、ほとんどすべての最新のデスクトップおよびモバイルブラウザーが含まれます。）Cookieまたはその他の手法を使用してローカルストレージをシミュレートする環境の場合、動作は使用されるシムによって異なります。 localStorageのいくつかのポリフィルは、 こちら にあります。

75
Ted Hopp

質問はすでにかなり古いですが、質問で引用されているので、私は私の声明について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（）メソッドは失敗に関してアトミックでなければなりません。失敗の場合、メソッドは何もしません。つまり、データ記憶領域への変更が成功するか、データ記憶領域がまったく変更されないようにする必要があります。

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

10
Christoph

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

ここに私のテストがあります JsPerfで

1
Dave Mackintosh

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

推奨される使用方法であるという理由だけで、標準インターフェイスを使用することをお勧めします。

0
Salvador Dali