4

ウェブ全体で、データを保存して取得するための 3 つのアプローチを見てきましたlocalStorage。

//As an array
localStorage["key"] = "value";
var value = localStorage[key];

//As an object, using properties
localStorage.key = value;
var value = localStorage.key;

//As an object, using getter and setter functions
localStorage.setItem("key", "value");
var value = localStorage.getItem("key");

JavaScript の配列はオブジェクトのように扱われるため、最初の 2 つは同等です。

ゲッターとセッターを使用すると、関数のロジックのカプセル化と拡張が可能になるため、3 番目のアプローチが最適なようです。

これについてもう少し洞察を得たいと思っています、誰かアドバイスできますか？

編集:この質問の理由は、localStorageが単なる配列以上のものであるため、localStorage とその実装を明示的に対象とする意見を探しているという事実に由来しています。

4

3 に答える 3

3

あなたの理解は私には完全に正しいようです。あなたを混乱させているのは、javascript の奇妙な性質です。JavaScriptではすべてがオブジェクトであり、すべてのオブジェクトは本質的にハッシュマップのように扱うことができるため、最初の2つの例は同等です. 最後の 2 つの例も、ローカル ストレージ オブジェクトの単なる関数メンバーであるため、実質的に同等です。すべての例が同じ効果を持っているので、最も重要なことは、コードをより読みやすくするために一貫性を保つことです。

配列もオブジェクトであり、そのように扱うことができることに注意してください

于 2013-05-29T23:34:18.813 に答える
1

オブジェクト プロパティへのブラケット アクセスとドット アクセスの違いは、言語の便宜上のものです。ただし、プロパティへの直接アクセスと getter/setter メソッドの使用の違いは興味深いものです。

仕様は次のように述べています。

「ストレージ オブジェクトでサポートされているプロパティ名は、オブジェクトに関連付けられたリストに現在存在する各キーと値のペアのキーです。」

つまり、直接アクセスは完全に合法であるということです。つまり、仕様を実装するすべてのユーザー エージェントはそれをサポートする必要があります。

どちらが良いかというと。そう言うことが仕様の目的なのかどうかはわかりません。内部の仕組みにより、特定のユーザー エージェントの実装がどちらの方法に偏っているかはわかりません。仕様は実際にはインターフェイスを定義するだけです。

たとえば、特定のユーザー エージェントでのプロパティへの直接アクセスが単純に getter/setting メソッドを内部的に呼び出した場合、これらのメソッドを使用するとパフォーマンスが向上する可能性があります。

個人的にはメソッドを使用しますが、アプリケーションの機能を単純な関数に抽象化し、後で必要に応じて交換できるようにします。例えば：

function getLocal( key ){
    return localStorage.getItem(key);
}

なんらかの理由でこれに問題がある場合、または古いブラウザーをサポートする必要がある場合 (たとえば、通常の Cookie に戻す場合)、アプリを 1 か所変更するだけで済みます。それがあなたの質問ではないことは知っていますが、そこにあります。

于 2013-05-30T00:19:51.607 に答える
0

これが私の使い方です。

function setLocalObj(id, obj){
    if(id && obj)
        localStorage[id] = JSON.stringify(obj);
}

function getLocalObj(id){
    if(localStorage[id])
        return JSON.parse(localStorage[id]);
}

function removeLocalObj(id){
    if(localStorage[id])
        localStorage.removeItem(id);
}


var myObj = {
    'val':10,
    'str': 'hi there'   
}
setLocalObj('myObj', myObj);
于 2013-05-29T23:40:33.300 に答える