ウェブページに値（文字列）を保存するにはどうすればいいですか

いくつかのjavascript関数で後で使用できるように、私のWebページに何かの価値を保存したいと思います。私は idの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')

出典

2012-04-05 Samantha J T Star

ちょうどこのようjqueryを使用して変数を格納するためHiddenFieldを使用してください：

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

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

希望これはあなたのために便利です。

出典

2012-04-05 08:47:23

ウェブページで非表示フィールドを使用します。例えば。

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

そして、これらの値で動作するようにjQueryので.valを使用しています。

出典

2012-04-05 08:47:24

関数val()は、要素の値を取得します。しかし、唯一の入力は値を持っている、したがって、あなたがデータを保存するために隠された入力を使用する必要があります。

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

しかし、後述のようにgenerellyあなたは任意の属性にアクセスすることができます。 >私は時々、特定のケースに応じて、この目的のために隠された入力を使用していattr()とprop()

出典

2012-04-05 08:49:02 SamiSalami

実際にプロパティではなく属性を取得/設定している場合、 '.attr（）'は正しいです。また、 '.data（）'メソッドに自動型変換を組み込まずに、html5の 'data-'属性を取得する方法も提案されています。 – nnnnnn

説明をありがとう、実際にそれが間違っていた:-) – SamiSalami

に関する正しい説明についてはコメントを参照 - ちょうどattr()が古いと新しい関数名がprop()であることに注意してください。

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

それからちょうどこのようにそれを取得：私は存在しないはずのページのマークアップされていないHTMLを感じるので、

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

私は入力を使用。

時には、最も簡単なことは、サーバーからスクリプトに変数を出力することです。

ASP.NETでの例：あなたはそれに夢中だ場合は、HTML5で導入されたのlocalStorage APIを使用してみてください

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

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

//--> 
</script>

出典

2012-04-05 08:49:13

は、そうでない場合は非表示フィールドに格納するには、移動するための方法です。

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 
}

幸運の線に沿って

何か！

出典

2012-04-05 08:51:27

あなたが望むような値を格納するための3つの方法があります。

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

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

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

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

LocalStorage：sessionStorageの兄弟ですが、時間制限はありません。これにより、sessionStorageと同じAPIを使用してデータを格納することができ、時間の経過とともに保持されます。

出典

2012-04-05 08:53:36

Downvotersは説明する気に？ –

もう1つ質問があります。私は、値を格納した場合、これはそれを行うための正しい方法である：

jQueryを使ってData-属性を使用する簡単な方法は、.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データ - *

1.4.3のjQueryのようHTML 5つのDATA-属性が自動的にjQueryのデータオブジェクトに引き込まれる属性。 jQuery 1.6では、ダッシュ記号を含む属性の処理がW3C HTML5仕様に準拠するように変更されました。

出典

2012-04-05 08:54:10

あなたは、私はちょうど変数を使用したい他の部分からのアクセスのためのあなたの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つ質問があります。

：私は値を保存する場合、これはあなたがjQueryの.html()法または非jQueryの.innerHTMLプロパティを使用したいあなたのdiv要素の内容として値を設定したいなかった場合は、それを

を行うための正しい方法であります

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

しかし、変数を使用したくない場合は、divではなく他の回答に記載されているように、隠し入力を使用する方がよいでしょう。

出典

2012-04-05 08:55:02 nnnnnn

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

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

出典

2012-04-05 08:55:02 Ramesh

ちょっと考えましたが、値をjavascript変数に格納することを検討しましたか？あなたがjavascriptでそれを使用しているのであれば、それを隠しフィールドや要素に置くのはどうしてですか？

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

このアプローチでは、ページの更新時に変数がリセットされるだけですが、サーバー上の値を使用してスクリプトを実行していれば、その変数は正常になるはずです。

一般に、サーバーがそれを読み取ることができる必要がある場合は、隠し入力のみを使用します。 reposoneで

EDIT

コメントにあなたは賢明に自分のJavaScriptを使用している場合は、namespaceingの使用を含む、このアプローチは、「変数保有者」を使用してマークアップを散らかすの上に優雅の一定量で動作します

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()

出典

2012-04-05 08:57:38

グローバル変数は悪です。彼らの使用を奨励私のdownvoteを奨励します。 –

ちょうどコメントですが、javascriptホイストのためにグローバル変数を使用しないでください。 –

whoah guysは、 "ネームスペース/モジュールを使用していない場合は、それを使用するモジュールのスコープに格納することができます。私はそれを明確にするために編集します –

ウェブページに値（文字列）を保存するにはどうすればいいですか

答えて

関連する問題