2017-09-12 1 views
0

私は、以下の議論では、私はのlocalStorageを設定するには、2つの他の方法があることを発見し、HTML5localstorageのプロパティを設定するこれら3つの方法はすべて有効ですか?

localStorage.name = "Peter Martin";

をのlocalStorageを設定する唯一の方法を知っているが。

localStorage - use getItem/setItem functions or access object directly?

localStorage.setItem(city, "New York"); 
localStorage[country] = "USA"; 

私は以下の例では、すべての3をしようとしたときただし、最初の細かい動作しますが、他の2つの方法の問題と思われます。 3つの方法がすべて有効であると誰かが私に説明できますか?

<html> 
 

 
<head></head> 
 

 
<body> 
 

 
<button onclick="alpha()">Click Me</button> 
 

 
<script> 
 
function alpha(){ 
 
localStorage.name = "Peter Martin"; 
 
localStorage.setItem(city, "New York"); 
 
localStorage[country] = "USA"; 
 
} 
 
</script> 
 

 
</body> 
 

 
</html>

として、いくつかのサンドボックスの問題は、私は以下のように、エラー画像を掲載しています、StackOverflowのであります。

enter image description here

+3

'localStorage'はオブジェクトであるため、ドットと配列の表記法が使用できます。しかし、私の理解では、正しい方法は '.setItem'と' .getItem'を使うことです。また、エラーについては、 'city'は引用符で囲まなければなりません – Rajesh

+1

@Rajesh so' country' – George

+2

'localStorage.name'は' localStorage ['name'] 'と同じです。これはlocalstorageとは関係がありません.JavaScriptのプロパティアクセサがどのように機能するのですか(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors)。 – Liam

答えて

3

これはJavaScriptの基本的な構文になります。

localStorage.setItem(city, "New York");を呼び出すと、現在のスコープで定義されていない識別子cityが参照されています。変数cityを定義するか、文字列"city"を直接使用する必要があります。

localStorage[country] = "USA";と同じです。 countryはこのスコープでは定義されていないため、JavaScriptエンジンはエラーをスローします。

-2

<html> 
 

 
<head></head> 
 

 
<body> 
 

 
<button onclick="alpha()">Click Me</button> 
 

 
<script> 
 
function alpha(){ 
 
localStorage.name = "Peter Martin"; 
 
localStorage.setItem("city", "New York"); 
 
localStorage["country"] = "USA"; 
 
} 
 
</script> 
 

 
</body> 
 

 
</html>

+0

と、これは何を意味するのでしょうか? – Liam

+5

説明のないコードはかなり無意味です(ほとんどの場合、特にこの場合) – George

+0

BTW、皮肉なことに彼の答えは正しいです。唯一のことは、文字列として定義するために都市と国を引用符で追加する必要があるコメントを追加する必要があることです。 – Deadpool

3

3つの方法がすべて有効な場合、誰かが私に説明できますか?

はい(ish)です。 Javascriptのすべてのもののようなローカルストレージはオブジェクトです。次の2つの方法でオブジェクトのプロパティにアクセスすることができます。

object.property 
object['property'] 

Property accessors in Javascript MDNを参照してください。したがって、上記のようにプロパティアクセサを使用してlocalstorageオブジェクトのプロパティにアクセスできない理由はありません。

localStorage.setItem("city", "New York"); 

ことのlocalStorageオブジェクトのメソッドです:キー名 と値を通過したストレージ・インターフェースのSetItem関数()メソッドは、ストレージにそのキーを追加します

、またはそのキーの 値が既に存在する場合はそれを更新します。

MDN

これは、「ストレージにそのキーを追加し、あるいはそれがすでに存在する場合、そのキーの 値を更新し、」をへの有効な方法です。存在しない不正なパラメータcityを渡したため、このメソッドに問題があります。私はあなたが"city"を意味したと信じています。 As covered in this answer

1

あなたは

1>プロパティにそれを打破することができますまたは第二バージョンが、JavaScript変数を使用することができます

localStorage.name = "Peter Martin"; 
localStorage["name"] = "Peter Martin"; 

値。変数にどのような値が入っているかを判断する必要があるため、読みにくいです。

IE

var tag= "name"; 
localStorage[tag] = "Peter Martin"; 

2>方法または/設定値を取得する機能。など

localStorage.setItem("name", "Peter Martin"); 

VARSは、許可され、あなたがSetItem関数を呼び出したときに何かを言うことができます.bindのようなものが含まれる.prototypeグッズは、()がある方法では

var obj = "name"; 
var value = "Peter Martin"; 
localStorage.setItem(obj, value); 

。しかし、一般的に私はプロパティを設定した後に何かしたいとき、私は次の行にそれを行います。私はそれをシンプルで読みやすいものにします。

なぜこの方法を使う必要があるのか​​分かりません。しかし、近代的なシステムでは、スピードの測定可能な差はないはずです。

2つのタブを同時に開いてタブ間でデータを同期させることができますか?

プロパティの値が変更され、メソッドやプロパティの値が変化する状況がありますが、詳細は思い出せません。 localStorage文字列を使用する必要はありません。


ここで、方法や機能が時には必要な理由を思い出してください。

これはプロパティを使用して失敗します。これは、あなたが長いリストを通過し、キャンセルしたいのであれば、その後のlocalStorageを使用して使用して、それに戻る機能

var elements = document.getElementsByTagName('input'); 
var n = elements.length; // assume we have 10 elements for this example 
var makeHandler = function(num) { // outer function 
    return function() { // inner function 
     console.log("This is element #" + num); 
    }; 
}; 
for (var i = 0; i < n; i++) { 
    elements[i].onclick = makeHandler(i+1); 
} 

を使用して動作します

var elements = document.getElementsByTagName('input'); 
var n = elements.length; // assume we have 10 elements for this example 
for (var i = 0; i < n; i++) { 
    elements[i].onclick = function() { 
     console.log("This is element #" + i); 
    }; 
} 

(いつも私の10の最後の値を返します)方法。


localStorageにはメソッドが必要ない場合もありますが、私たちの無意識の脳はパターンを認識します。また、プロパティ値パターンを持つループは、詳細がリコールされていなくても、それを見つけるのにどれくらいの時間がかかるかという警告、不安を引き起こします。変数への参照を格納していないので動作しますが、静的な文字列しか格納しません。

最高速度でプログラムするには、仕事をしているパターンに従う必要があります。メソッドは、メソッドが呼び出されたときの値の値を解決します。

関連する問題