Wie kann ich einen Wert (String) in einer Webseite speichern

Question

Ich möchte den Wert von etwas auf meiner Webseite für die spätere Verwendung von einige Javascript-Funktionen speichern. Ich dachte an etwas wie das, wo ich ein div mit einer ID von CategoryID habe und dann den Wert als HTML einfügen.

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

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

dann später innerhalb von Funktionen wie refreshGrid (und einigen anderen Funktionen), kann ich den Wert wie diese:

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

Ist dies wie ein guter Weg, scheint eine temporäre Variable zu speichern? Wie wäre es mit HTML5, gibt es eine Möglichkeit, Werte zu speichern, ohne sie in eine div oder etwas ähnliches zu setzen. Alles, was ich brauche, ist ein Wert, der in einigen Weg auf der Seite gespeichert ist.

Noch eine Frage. Wenn ich den Wert speichern, ist dies der richtige Weg, es zu tun:

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

Answer 1

Bitte verwenden HiddenField zum Speichern Variable jquery wie folgt aus:

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

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

Hoffnung, dies für Sie hilfreich ist.

Answer 2

Verwenden Sie versteckte Felder auf Ihrer Webseite. Zum Beispiel.

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

Und dann .val in JQuery verwenden, um mit diesen Werten zu arbeiten.

Answer 3

Die Funktion val() erhält den Wert eines Elements. Aber nur Eingänge haben Werte, deshalb sollten Sie einen versteckten Eingang verwenden, um die Daten zu speichern:

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

Aber generelly können Sie beliebige Attribute zugreifen, wie unten beschrieben. Seien Sie sich bewusst sein, dass attr() alt ist und die neue Funktion Name ist prop() -> siehe richtige Erklärung Kommentar bezüglich attr() und prop()

Answer 4

ich manchmal versteckte Eingänge für diesen Zweck auf den speziellen Fall abhängig.

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

Dann ist es abrufen wie folgt aus:

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

I-Eingänge verwenden, da ich html fühlen, die für die Seite Markup ist nicht nicht da sein sollte.

Manchmal ist es am einfachsten, die Variable einfach vom Server in Skript auszugeben.

Beispiel mit ASP.NET:

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

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

//--> 
</script> 

Answer 5

Sie sollten den localstorage-API in HTML5 versuchen, mit eingeführt, wenn Sie auf dem sonst zu speichern es in versteckten Feldern scharf sind sind der Weg zu gehen.

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

und von localstorage

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

Hinweis zu holen: die localstorage nur als Strings speichert Werte, die erinnern! :)

Wenn Sie älter sein möchten Browser-kompatibel, vergessen Sie nicht zu überprüfen, ob localStorage existiert und eine andere Lösung implementieren.

Etwas nach dem Vorbild von

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

Viel Glück!

Answer 6

Es gibt drei Möglichkeiten, um die Werte zu speichern, wie Sie wollen:

• Cookies: die gute alte Art und Weise. Es wird überall unterstützt, eignet sich jedoch besser für Werte, die auf verschiedenen Seiten gespeichert werden müssen, und weist andere Beschränkungen auf (z. B. Größe, Anzahl der Einträge usw.).

• SessionStorage: nicht überall unterstützt, aber es gibt Shims. Sie können einen Wert speichern, der nur für eine Sitzung gültig ist. Beispiel:

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

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

Dieser akzeptiert Strings nur als Schlüssel und Werte. Wenn Sie Objekte speichern möchten, können Sie sie mit JSON.stringify speichern und später mit JSON.parse abrufen.

LocalStorage: der Bruder von sessionStorage, aber es hat keine zeitliche Begrenzung. Es ermöglicht Ihnen, Daten mit der gleichen API wie sessionStorage zu speichern, und es wird im Laufe der Zeit beibehalten.

Answer 7

Noch eine Frage. Wenn ich der Wert speichere, ist dies der richtige Weg, es zu tun:

Der einfachere Weg Data- Attribute mit jQuery zu verwenden ist, um die .data() Methode zu verwenden.

<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 

Ich persönlich würde eher speichern alle mit Elementen in einem Wrapper zugeordneten Daten Div oder andere Elemente und die Verwendung 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 Daten- * Attribute

Ab jQuery 1.4.3 HTML 5 Data- automatisch in jQuery Datenobjekt gezogen werden Attribute. Die Behandlung von Attributen mit eingebetteten Gedankenstrichen wurde in jQuery 1.6 geändert, um der W3C HTML5-Spezifikation zu entsprechen.

Answer 8

Wenn Sie den Wert in einem Teil des JavaScript für den Zugriff von einem anderen Teil speichern wollen würde ich nur eine Variable:

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

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

dann später, wenn Sie den Wert benötigen Zugriff nur categoryID direkt .

Noch eine Frage. Wenn ich den Wert speichern, dann ist dies der richtige Weg, es

zu tun Wenn Sie den Wert als Inhalt des div-Elements setzen wollten Sie jQuery verwenden würde .html()-Methode oder die nicht-jQuery .innerHTML Eigenschaft:

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

Aber wenn Sie keine Variable verwenden möchten, wäre es besser, eine versteckte Eingabe zu verwenden, wie in anderen Antworten erwähnt, anstatt ein div.

Answer 9

Für Browser-Kompatibilität, ist es weiser, verstecktes Feld zu verwenden, wie von anderen vorgeschlagen. Wenn Sie jedoch HTML5 verwenden möchten, bietet es WebStorage. Weitere Informationen finden Sie unter http://sixrevisions.com/html/introduction-web-storage/

Darüber hinaus gibt es ein Framework namens Lawnchair die Angebote Lösung für html5 mobile Apps, die eine leichte, adaptive, einfache und elegante Persistenz-Lösung benötigen.

Answer 10

Nur ein Gedanke, aber haben Sie darüber nachgedacht, den Wert in einer Javascript-Variable zu speichern? Wenn Sie es nur in Javascript verwenden, warum sollten Sie es in ein verstecktes Feld oder ein Element stecken?

Deklarieren Sie einfach Variable im globalen Bereich, wenn Sie Namespacing/Module nicht verwenden, aber wenn Sie sind, können Sie sie im Bereich des Moduls speichern, das sie verwendet.

Nur Überlegungen mit diesem Ansatz ist die Variable wird auf Seite aktualisieren zurückgesetzt, aber wenn Sie den Wert auf dem Server verwenden, nur in Skript, dann sollte das in Ordnung sein.

Im Allgemeinen würde ich nur eine versteckte Eingabe verwenden, wenn der Server es lesen könnte.

EDIT

In reposone zu den Kommentaren, wenn Sie Ihr Javascript sinnvoll verwenden, die die Verwendung von namespaceing enthält dann dieser Ansatz funktioniert mit einer gewissen Eleganz über Markup mit „variable holders“ unübersichtlich

Ein sehr schnelles Gerüst für die Namensräume .....

in einer Datei namens 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; 
} 

in einer Datei namens 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 
    }; 
}; 

schließlich auf Ihrer Seite ...

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

dann an jedem Punkt, den Sie halten Ihren Wert bekommen kann mit ...

MyProject.MyPage.getValue()