javascript - Web ページに値 (文字列) を保存するにはどうすればよいですか

Question

後でいくつかの JavaScript 関数で使用するために、Web ページに何かの値を保存したいと思います。CategoryID の id を持つ div があり、その値を HTML として入れるこのようなことを考えました。

   <div id="CategoryID"></div>

   $('#categories > li > a').click(function (e) {
      e.preventDefault();
      $('#CategoryID').html = $(this).attr('data-value')
      refreshGrid('Reference');
   });

その後、refreshGrid (およびその他の関数) などの関数内で、次のような値を取得できます。

   var categoryID = $('#CategoryID').val();

これは一時変数を格納する良い方法のように思えますか? HTML5 ではどうでしょうか、値を div などに入れずに値を保存する方法はありますか。必要なのは、何らかの方法でページに値を格納することだけです。

もう1つ質問です。値を保存する場合、これが正しい方法です。

$('#CategoryID').html = $(this).attr('data-value')

score 2 · Accepted Answer

次のようHiddenFieldに変数を保存するために使用してください：jquery

var tempvalue= $(this).attr('data-value');

$('#my-hidden-field').val(tempvalue);

これがお役に立てば幸いです。

score 2 · Accepted Answer

Web ページで隠しフィールドを使用します。例えば。

<INPUT TYPE=HIDDEN NAME="customerId" VALUE="1234567">

そして、.valこれらの値を操作するために JQuery で使用します。

score 2 · Accepted Answer

特定のケースに応じて、この目的のために隠し入力を使用することがあります。

<input type="hidden" name="CategoryID" id="CategoryID" />

次に、次のように取得します。

var categoryID = $('#CategoryID').val();

ページのマークアップではない html があってはならないので、入力を使用します。

変数をサーバーからスクリプトに出力するのが最も簡単な場合もあります。

ASP.NET の例:

<script type="text/javascript">
//<!--

var categoryID = <%= <output value from server goes here> %>;

//-->
</script>

score 1 · Accepted Answer

ちょっと考えただけですが、値をjavascript変数に保存することを検討しましたか? JavaScript でのみ使用している場合、隠しフィールドや要素にわざわざ入れる必要はありません。

名前空間/モジュールを使用していない場合はグローバルスコープで変数を宣言するだけですが、使用している場合はそれを使用するモジュールのスコープに格納できます。

このアプローチに関する唯一の考慮事項は、ページの更新時に変数がリセットされることですが、サーバー上の値を使用しない場合は、スクリプトだけで問題ありません。

一般に、サーバーがそれを読み取れるようにする必要がある場合にのみ、非表示の入力を使用します。

編集

コメントへの回答では、名前空間の使用を含むJavaScriptを賢明に使用している場合、このアプローチは、「変数ホルダー」でマークアップを乱雑にするよりも、ある程度の優雅さで機能します

名前空間のための非常に迅速な足場.....

MyProject.Global.js というファイルに

//This function is truly global
function namespace(namespaceString) {
   var parts = namespaceString.split('.'),
        parent = window,
        currentPart = '';

   for (var i = 0, length = parts.length; i < length; i++) {
      currentPart = parts[i];
      parent[currentPart] = parent[currentPart] || {};
      parent = parent[currentPart];
   }

   return parent;
}

MyProject.MyPage.Ui.js というファイルに

namespace('MyProject.MyPage');

MyProject.MyPage.Ui = function () {

   var self = this;
   self.settings = {};

   function init(options) {
      $.extend(self.settings, options);
        //any init code goes here, eg bind elements
        setValue();
      };
   };

   //this is considered a "private" function
   function setValue(){

       $('#categories > li > a').click(function (e) {
          e.preventDefault();
          self.settings.myValue = $(this).attr('data-value');
          refreshGrid('Reference');
       });
   }

   function getValue(){
     return self.settings.myValue;
   }

   //any function within this return are considered "public"
   return {
      init: init,
      getValue: getValue
   };
};

最後にあなたのページに...

$(document).ready(function () {
    var ui = new MyProject.MyPage.Ui();
    ui.init();
}

その後、いつでも...を使用して値を取得できます...

MyProject.MyPage.getValue()

score 1 · Accepted Answer

関数val()は要素の値を取得します。ただし、値を持つのは入力だけなので、非表示の入力を使用してデータを保存する必要があります。

<input id="CategoryId" type="hidden" />

ただし、一般に、以下で説明するように、任意の属性にアクセスできます。は古いものattr()で、新しい関数名はprop()-> についての正しい説明についてはコメントを参照してattr()くださいprop()

score 1 · Accepted Answer

HTML5 で導入された localStorage API を使用してみてください。それ以外の方法で非表示フィールドに保存することに熱心な場合は、試してみてください。

var idForStorage = $('#CategoryID').val();
window.localStorage.setItem('keyToId', idForStorage);

localStorage から取得する

var fetchedId = window.localStorage.getItem('keyToId');

注: localstorage は値を文字列としてのみ格納します。覚えておいてください! :)

また、古いブラウザーに準拠したい場合は、 localStorage が存在するかどうかを確認し、別のソリューションを実装することを忘れないでください。

の線に沿った何か

if(typeof(window.localStorage) !== 'undefined'){
    //set item or do whatever
} else {
    //implement other solution or throw an exception
}

幸運を！

score 0 · Accepted Answer

JavaScript の一部に値を保存して別の部分からアクセスしたい場合は、変数を使用します。

var categoryID = null;  // set some kind of default

$('#categories > li > a').click(function (e) {
  e.preventDefault();
  categoryID = $(this).attr('data-value');
  refreshGrid('Reference');
});

その後、値が必要になったときにcategoryID直接アクセスします。

もう1つ質問です。値を保存する場合、これが正しい方法です

値を div 要素のコンテンツとして設定したい場合は、jQuery の.html()メソッドまたは jQuery 以外の.innerHTMLプロパティを使用します。

$('#CategoryID').html( $(this).attr('data-value') );
// or
$("#CategoryID")[0].innerHTML = $(this).attr('data-value');

ただし、変数を使用したくない場合は、div ではなく、他の回答で述べたように非表示の入力を使用する方がよいでしょう。

score 0 · Accepted Answer

ブラウザの互換性のために、他の人が提案したように隠しフィールドを使用する方が賢明です。ただし、探索的な理由から、HTML5 を使用したい場合は、WebStorage が提供されます。詳細については、http://sixrevisions.com/html/introduction-web-storage/をご覧ください。

また、 Lawnchairと呼ばれるフレームワークがあり、軽量で適応性があり、シンプルでエレガントな持続性ソリューションを必要とする html5 モバイルアプリ向けのソリューションを提供します。

score 0 · Accepted Answer

必要に応じて値を保存するには、次の 3 つの方法があります。

クッキー: 古き良き方法。どこでもサポートされていますが、異なるページに保持する必要がある値に適していて、他の制限 (サイズ、エントリ数など) があります。
SessionStorage: どこでもサポートされているわけではありませんが、シムがあります。セッションの間だけ持続する値を保存できます。例：

sessionStorage.setItem('key', 'value')

sessionStorage.getItem('key', 'value')

これは、キーと値としてのみ文字列を受け入れます。オブジェクトを保存する場合は、を使用JSON.stringifyして保存し、後でを使用して取得できますJSON.parse。

LocalStorage: sessionStorage の兄弟ですが、時間制限はありません。sessionStorage と同じ API を使用してデータを保存することができ、長期にわたって保持されます。

score 0 · Accepted Answer

もう1つ質問です。値を保存する場合、これが正しい方法です。

Data-jQuery で属性を使用する簡単な方法は、.data()メソッドを使用することです。

<body id="CategoryData" data-value1="someone" data-value2="sometwo">

....

alert( $("#CategoryData").data('value1') ); // popup with text: someone
alert( $("#CategoryData").data('value2') ); // popup with text: sometwo

個人的には、アイテムに関連付けられたすべてのデータをラッパーDivまたは他の要素に格納し、jquery.data を使用したいと考えています。

<table data-locationid="1">
  <tr data-personid="1">
    <td>Jon</td>
    <td>Doe</td>
  </tr>
  <tr data-personid="2">
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

HTML5 data-* 属性

jQuery 1.4.3 以降、HTML 5 の data- 属性は、jQuery のデータオブジェクトに自動的に取り込まれます。ダッシュが埋め込まれた属性の処理は、W3C HTML5 仕様に準拠するように jQuery 1.6 で変更されました。

javascript - Web ページに値 (文字列) を保存するにはどうすればよいですか

10 に答える 10

Related

Reference