web-dev-qa-db-ja.com

Localstorageを使用して、1つのHTMLページから別のHTMLページ（DOM）にJavaScript変数を格納および取得する

1つのHTMLページ1.htmlがあり、テキストコンテンツを取得して、jqueryを使用してjs.jsファイルに保存し、IDでテキストを取得します。

このコードは1.htmlページでのみ機能し、コピー元のテキストはですが、では機能しません2.htmlファイル内。

これが私のコードです。 localstorageセッターの2番目のパラメーター内にテキストを保存すると機能することに注意してください。

 $( document ).ready(function() {
         var c1Title= $('#r1c1Title').text();

//changing c1Title to any String content like "test" will work

    localStorage.setItem("t1",c1Title);
        var result = localStorage.getItem("t1");

        $("#title1").html(result);
        alert(result);
    });

これが私が取り組んでいる完全なデモです Github ：

javascriptphpjqueryhtmllocal-storage
8
user7038047

localStorageまたはcookiesを使用する必要があります。

LocalStorageを使用

最初のページで、次のコードを使用します。

_localStorage.setItem("variableName", "variableContent")
_

これにより、ドメインにlocalStorage変数variableNameが設定され、コンテンツはvariableContentになります。 これらの名前と値は好きなように変更できます。これらは例として使用されているだけです

2ページ目で、次のコードを使用して値を取得します。

_localStorage.getItem("variableName")
_

これは、variableNameに格納されている値、つまりvariableContentを返します。

ノート

  • LocalStorageに保存できるデータの量には5MBの制限があります。
  • localStorage.removeItem("variableName")を使用してアイテムを削除できます。
  • 現在の場所によっては、 cookie policy を確認する必要がある場合があります（これは、Cookieだけでなく、コンピューターにデータを保存するすべての形式のWebサイトに影響します）。 そうでない場合、これらのソリューションのいずれかを使用することは違法になる可能性があるため、これは重要です。
  • ユーザーがブラウザを閉じるまでデータを保存するだけの場合は、代わりにsessionStorageを使用できます（コードのすべてのインスタンスでlocalStorageをsessionStorageに変更するだけです）
  • サーバーでも変数値を使用できるようにしたい場合は、代わりにCookieを使用してください。チェックアウト MDNのCookie
  • LocalStorageの詳細については、 MDNに関するこの記事 、または W3Schoolsに関するこの記事 を確認してください。
5
Toastrackenigma

このコードを使用してみてください。 local storageを使用することをお勧めします。

ここで、このローカルストレージの値を親HTMLページまたは親JSファイルに設定していることを確認する必要があります。

ローカルストレージを作成

localStorage.setItem（ "{itemlable}"、{itemvalue}）;

localStorage.setItem("variable1", $('#r1c1Title').text());
localStorage.setItem("variable2", $('#r1c2Title').text());

ローカルストレージの値を取得します

localStorage.getItem（ "{itemlable}"）

alert(localStorage.getItem("variable1") + ' Second variable ::: '+ localStorage.getItem("variable2"));

詳細については、このリンクに従ってください https://www.w3schools.com/html/html5_webstorage.asp

divに保存する場合は、次のコードに従ってください

HTMLコード

<div class="div_data"></div>

Jsコード：

$(document).ready(function () {
            localStorage.setItem("variable1", "Value 1");
            localStorage.setItem("variable2", "Value 2");
                $(".div_data").html(' First variable ::: '+localStorage.getItem("variable1") + ' Second variable ::: '+ localStorage.getItem("variable2"));
        });

お役に立てれば。

1
Emipro Technologies Pvt. Ltd.

上記のコメントで述べたように、ローカルストレージを使用できます。 JavaScriptでの記述方法を以下に示します。

ローカルストレージの長所と短所

長所：

  1. Webストレージは、Cookieの改善と単純に見なすことができ、はるかに大きなストレージ容量を提供します。
  2. 5120KB（5MBはChromeでは250万文字に相当）は、ドメイン全体のデフォルトのストレージサイズです。
  3. これにより、通常の4KBのCookieよりもかなり多くのスペースを扱うことができます。
  4. データは、HTTPリクエスト（HTML、画像、JavaScript、CSSなど）ごとにサーバーに送り返されないため、クライアントとサーバー間のトラフィック量が減少します。
  5. LocalStorageに保存されたデータは、明示的に削除されるまで存続します。加えられた変更は保存され、サイトへの現在および将来のすべてのアクセスで使用できます。

短所：

同一起源のポリシーで機能します。そのため、保存されたデータは同じオリジンでのみ利用できます。 //ローカルストレージに値を保存しますlocalStorage.setItem（ "c1Title"、$（ '＃r1c1Title'）。text（））;

// Retrieve value in local storage
localStorage.getItem("c1Title");

あなたのhtml div

<div id="output"></div>

JavaScriptコードを追加

$('#output').html(localStorage.getItem("c1Title"));

うまくいかない場合はお知らせください

1
Shyam Shingadiya