localStorageについてのコードの内容を教えて下さい。

Question

【誤記】

window.localStorage = window.localStorage || (function) {
  var storage = {};

  return {
    setItem: function(key, value) {
      storage[key] = value;
    },
    getItem: function(key) {
      return storage[key];
    },
    removeItem: function(key) {
      delete storage[key];
    },
    clear: function() {
      storage = {}:
    },
    emulated: true
  };
})();

【訂正】

window.localStorage = window.localStorage || (function() {
  var storage = {};

  return {
    setItem: function(key, value) {
      storage[key] = value;
    },
    getItem: function(key) {
      return storage[key];
    },
    removeItem: function(key) {
      delete storage[key];
    },
    clear: function() {
      storage = {}:
    },
    emulated: true
  };
})();

（１） 「window.localStorage = window.localStorage || (function) {})();」の
部分について。これは「window.localStorage」が存在すれば、論理和右辺の無名関数を
実行してその返り値を代入演算子左辺の「window.localStorage」に代入（上書き）しなさい
という意味でしょうか。

（２） return文で複数の値を返していますが、そのぞれのメソッドが再定義されているのでしょうか？
「method: function() {}」の構文が分かりません。

（３）「emulated: true」はどういう意味なのでしょうか。専門書で調べても説明は載っていませんでした。

よろしくお願い致します

Comments

[maisumakun]

「(function)」は文法として成立しません。何かの書き間違えではないでしょうか？

[m.ts10806]

どこで拾ってきたコードでしょうか。出典明示してください。

[taka_oct092018]

「パーフェクト JavaScript　初版第７刷」 P383　リスト16.11です。

Answer 1

これは「window.localStorage」が存在すれば、論理和右辺の無名関数を

実行してその返り値を代入演算子左辺の「window.localStorage」に代入（上書き）しなさい
という意味でしょうか。

正反対です。window.localStorageが存在する場合はそのまま元の値を書き戻すだけで、存在しない場合は関数の実行結果を詰め込む、という意味です。

eturn文で複数の値を返していますが

いえ、巨大なオブジェクトリテラルという1つの値を返しています。method:は単に、オブジェクトリテラルのプロパティを設定しているだけです。

Comments

[taka_oct092018]

maisumakun様、解説ありがとうございます。
間違って解釈しておりました。

(A)「window.localStorage || (function() {}」について。
（１）論理和左辺がtrueの場合は、右辺のオペランドは実行されることがなく
左辺の「window.localStorage」が代入演算子左辺に代入される。
（２）論理和左辺がfalseの場合は、右辺の即時無名関数が実行されて、返り値が代入される。

(B)return文による返り値の個数について。
関数内で生成されたstorageオブジェクトに対して、連想配列という形でkeyとvalueを設定してる。

上記が今現在の私なりの解釈です。

[taka_oct092018]

maisumakun様、具体的で分かり易い解説ありがとうございます。
おかげさまで、JavaScriptの理解を深めることが出来ました。

Answer 2

（１）
ご理解の通りです。

---

（２）
オブジェクト初期化子です。オブジェクトを返しています。
オブジェクト初期化子 - JavaScript | MDN

大雑把に言うと、オブジェクトとはキーと値のペアの集合です。
「method: function() {}」の構文は、method がキー、function() {} が値のペアを作る、という意味です。

---

（３）
この断片だけではわからないです。
全てのコードを読むか、書いた人に聞くしかないと思いますが、推測で言うなら「localStorageに対応していないUAのためにエミュレートしているかどうかのフラグ」だと思います。

Comments

[Lhankor_Mhy]

ああ、（1）は読み違えてました。
maisumakunさんのご回答の通りです。

[taka_oct092018]

Lhankor_Mhy様、返信ありがとうございます。
オブジェクトにおけるキーと値について正しく理解できるようになりました。

Answer 3

修正依頼欄より
「パーフェクト JavaScript　初版第７刷」 P383　リスト16.11です

2011年の書籍の内容のようですね。（技術評論社：ISBN 978-4-7741-4813-7）

当時は localStorage が実装されはじめた頃でしたので、MDN:機能検出の実装 を実施しています。

ご質問の（１）〜（３）の回答は既に出ていますが…

localStorageに代わるオブジェクト（返却されたオブジェクトリテラル）の setItem(key,val) メソッドは第二引数に文字列以外の値を受け入れる実装ですので、「仕様どおりの実装ではないが似たような使い方ができる」と読み取れます。

（３）「emulated: true」はどういう意味なのでしょうか。

前述の内容を踏まえると、Lhankor_Mhy さんの回答通りフラグです。
「ユーザが似たような実装をしてみた」と判断ができるように余分なemulatedプロパティを持たせたものと解釈できます。

Comments

[taka_oct092018]

AkitoshiManabe様、返信ありがとうございます。
簡潔な表現で説明して頂いて、理解出来るようになりました。