92

最近、 LocalStorage について質問しました。項目がまだ設定されていない場合にJSON.parse(localStorage.item)andを使用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'] よりも優れていますか、またはそれらが機能する限り、簡略表記は問題ありませんか?

4

4 に答える 4

91

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

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

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

編集:クリストフが彼の回答で指摘しているように、関数型インターフェイスは、の事前定義されたプロパティに等しいキーの下で値を確実に保存および取得する唯一の方法です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。

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

于 2013-03-15T17:53:55.217 に答える
13

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

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

于 2014-07-23T07:59:15.377 に答える