div/tableに保存されたローカルストレージキーを表示する

Question

私は検索して、ローカルストレージのキーと値のペアを回復し、それらをtables/divs/lists/etcに表示することについていくつかの参照を見つけましたが、終わり。

json-stringifyを使用してフォーム入力フィールドからlocalstorageに文字列としてキー値ペアを保存できました。これはSafariのWebインスペクタ/リソースビューアで確認済みです。

私の問題は、ユーザーが保存されたキーをクリックして値をフォームに再ロードできるように、キー/値ペアの表現をtable/div /リストに表示することです。保存されたキーはupdateJobsList()でdivにロードされませんが、コンソールにエラーが発生しないので、何か完全に間違っている必要があります。

以下は、jsファイルの関連するサンプルコードです。

function updateJobsList() { 
var jobs = localStorage.length 
var s = '<h2>Jobs</h2>'; 
s+= '<ul>'; 
for (var i=0;i<jobs;i++) { 
    var jobName = localStorage.key(i); 
    s+= '<li>'+ 
     '<div style="float:right;">'+ 
     '<input type="button" value="Load" onclick="readLocal(\''+jobName+'\');"/'+'> '+ 
     '<input type="button" value="Delete" onclick="deleteLocal(\''+jobName+'\');"/'+'> '+ 
     '</div>'+ 
     '<strong>'+jobName+'</strong>'+ 
     '</li>'; 
    } 
    $('jobs').innerHTML = s+'</ul>'; 
} 

Answer 1

localStorageを反復配列としてループしようとしていますが、localStorageの値は名前と値のペアを使用して連想配列として格納されます。それはあなたがオブジェクトの値にアクセスすることができますが、あなたはまだあなたのhtmlを挿入する必要があるので、

 


    var storage = window.localStorage; 
    for (var key in storage) { 
     var jobName= storage[key]); 
     // execute the rest of your code 
    } 

 

右、（あなたの変数「S」に保存されている：オブジェクトまたは連想配列をループするための方法が異なるビットであります）をDOMに追加します。まず、あなたのHTML内の要素を定義し、IDを指定します。

 


<div id="jobsList"></div> 

 

その後、あなたはjQueryのを使用している、あなたがこのようなHTML要素を埋めるだろうと仮定すると：

 


$("#jobsList").html(s); 

 

Answer 2

$(jobs).html(); 

あなたはjQueryのを使用していると仮定すると探しているものです。また、一重引用符または二重引用符が含まれている場合にjobNameをエスケープすることを確認してください。