LocalStorageを試し、divからテキストを取得してlocalStorageに保存しようとしていますが、[object Object]として設定し、[object Object]を返します。なぜこうなった?
localStorage.content = $('#test').html('Test');
$('#test').html(localStorage.content);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test"></div>
divからテキストを取得するおよびローカルストレージに保存する
注:テキストとHTMLは異なります。あなたはテキストに言及した質問で。 html()
は、<a>example</a>
のようなHTMLコンテンツを返します。テキストコンテンツを取得する場合は、text()
の代わりにhtml()
を使用する必要があり、結果は<a>example<a>
ではなくexample
になります。とにかく、私はあなたの専門用語を使ってテキストにします。
ステップ1: divからテキストを取得します。
あなたがしたことは、divからテキストを取得するのではなく、テキストをdivに設定することです。
$('#test').html("Test");
実際にテキストをdivに設定しており、出力はjQueryオブジェクトになります。それが[object Object]
として設定する理由です。
テキストを取得するには、このように書く必要があります$('#test').html();
これはオブジェクトではなく文字列を返すため、結果はTest
になります。
ステップ2:ローカルストレージに設定します。
あなたのアプローチは正しく、あなたはそれを次のように書くことができます
localStorage.key=value
しかし、好ましいアプローチは
設定するlocalStorage.setItem(key,value);
取得するlocalStorage.getItem(key);
。
キーと値は文字列でなければなりません。
あなたのコンテキストコードでは
$('#test').html("Test");
localStorage.content = $('#test').html();
$('#test').html(localStorage.content);
しかし、あなたのコードには何の意味もありません。 divからテキストを取得してローカルストレージに保存するためです。また、ローカルストレージから同じものを読み取り、divに設定しています。 a=10; b=a; a=b;
のように
他の問題に直面している場合は、それに応じて質問を更新してください。
LocalStorageに単純な文字列を書き込む場合は、setItem
とgetItem
を使用します。また、あなたが言っているようにあなたがあとにいるテキストである場合は、text()
を使用する必要があります。
// get the text
var text = $('#test').text();
// set the item in localStorage
localStorage.setItem('test', text);
// alert the value to check if we got it
alert(localStorage.getItem('test'));
JSFiddle: https://jsfiddle.net/f3zLa3zc/
// get html
var html = $('#test')[0].outerHTML;
// set localstorage
localStorage.setItem('htmltest', html);
// test if it works
alert(localStorage.getItem('htmltest'));
JSFiddle:
https://jsfiddle.net/psfL82q3/1/
ユーザーは、divのコンテンツが変更されたときにlocalStorageを更新したいと考えています。 divの内容がどのように変化するかは不明であるため(ajax、他の方法?)、contenteditable
およびblur()
を使用してdivの内容を変更し、古いlocalStorage
エントリを上書きします。
// get the text
var text = $('#test').text();
// set the item in localStorage
localStorage.setItem('test', text);
// bind text to 'blur' event for div
$('#test').on('blur', function() {
// check the new text
var newText = $(this).text();
// overwrite the old text
localStorage.setItem('test', newText);
// test if it works
alert(localStorage.getItem('test'));
});
Ajaxを使用していた場合、代わりにコンテンツの更新を担当する関数を介して関数をトリガーします。
JSFiddle:
https://jsfiddle.net/g1b8m1fc/
localStorage
は文字列コンテンツのみを保存でき、 html(htmlString)
はjQueryオブジェクトを返すため、jQueryオブジェクトを保存しようとしています。
オブジェクトではなく文字列コンテンツを設定する必要があります。 setItem
メソッドを使用してデータを追加し、 getItem
を使用してデータを取得します。
window.localStorage.setItem('content', 'Test');
$('#test').html(window.localStorage.getItem('content'));