web-dev-qa-db-ja.com

jQueryを使用してlocalStorageを設定および取得する

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>
javascriptjquerylocal-storage
18
werewr

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;のように

他の問題に直面している場合は、それに応じて質問を更新してください。

26
Tintu C Raju

LocalStorageに単純な文字列を書き込む場合は、setItemとgetItemを使用します。また、あなたが言っているようにあなたがあとにいるテキストである場合は、text()を使用する必要があります。

.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/

HTML自体を保存する

// 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/

23
Tommie

localStorage は文字列コンテンツのみを保存でき、 html(htmlString) はjQueryオブジェクトを返すため、jQueryオブジェクトを保存しようとしています。

オブジェクトではなく文字列コンテンツを設定する必要があります。 setItem メソッドを使用してデータを追加し、 getItem を使用してデータを取得します。

window.localStorage.setItem('content', 'Test');
$('#test').html(window.localStorage.getItem('content'));
3
Pranav C Balan