2017-05-11 18 views
2

に追加します。localStorageにデータを設定するのが面倒ですが、値を抽出して、特定のページの読み込み時に空のspanに入力しようとしています。localStorageから値を取得し、クラス

これは私がいじっていたものですが、これはそれについて移動するための正しい方法であれば、私はよく分からない:

if($(".body-class-name").length > 0){ 
     $('.title span').append($(localStorage.getItem("first_name"))); 
    } 

私は契約で動作するようにしようとしただけで、他の例外部のJSONデータを使用しています。これは少しでもです。私が扱おうとしているものの多くです。

+0

号マイ悪いです。私が混乱しようとしていることを反映するためにコードを更新しました。ありがとう! – ultraloveninja

+0

もっと文脈が必要です。これはいつ起こるはずですか?ページが読み込まれると、クリックするとどうなりますか?ストレージ値をスパンに追加するか、スパンをクリアして新しい値を挿入しますか? – Poku

+0

@Poku - 自分のコードを更新しました。ごめんなさい。そして、はい、私は空のスパンに格納された値を挿入したいと思います。 – ultraloveninja

答えて

0

コードが想定していることを行います。あなたはabitを改善することができます。

 if($(".body-class-name").length > 0){ 
     var firstname = $(localStorage.getItem("first_name"); 
     if (firstname) { 
      $('#title-text').text(firstname)); 
     } 
     } 

あなたの投稿にはいくつかの文脈がありません。しかし、私も見ています:

あなたがそのスパンにファーストネームを追加し続けたくない場合は、appendの代わりにテキストを使用します。

コメントに記載されているその他のものはセレクタに注意してください。代わりにIDを照会するように変更しました。

+0

Questionで 'javascript 'の問題は何ですか? – guest271314

+0

私は私の答えに書いています。コードが想定していることをしますが、OPは正しいことを行い、いくつかの改善を行ったかどうかを尋ねます – Poku

+0

Questionの 'javascript'は期待される結果をレンダリングしています。 OPは、OPのコードが期待される結果をレンダリングするかどうか、またはOPにコードを示す完全で検証可能な最小の例を提供するかどうか、期待される結果が何であるかを示していない。 – guest271314

0
if ($ (".body-class-name"). length > 0){ 
    $ ('.title span'). append (localStorage . getItem ("first_name")); } 

$()はlocalStorage.getItemの周りに必要とされていません()

+0

_ "localStorage.getItem()の周りに$()は必要ありません" _あなたはどうやって特定できますか? – guest271314

0

あなたはloadイベントを使用する必要はありません。 Loadイベントはアセットファイル用です。準備完了イベントを使用できます。

基本的に、jQueryコードはドキュメントの準備ができた後に実行されます。

あなただけ例えば、機能をラップする必要があります。

<h1 class="title">Hello again <span>User</span></h1> 
<br/> 
<label> 
    Enter your name here: 
    <input name="firstname" /> 
</label> 

<script> 
(function($){ 
    $("input[name='firstname']").change(function(){ 
    // Store 
    localStorage.setItem("first_name", $(this).val()); 
    }); 

    // Load store 
    $('.title span').text(localStorage.getItem("first_name")); 

})(jQuery); 
</script> 

Live code here

関連する問題