Best Practices für die Aufbewahrung von JSON in URL -Hash / Fragment

Question

Ich baue einen einseitigen AJAX-Antrag und möchte nach dem URL-Hash unter bestimmten Umständen in JSON (#) in JSON speichern. Ich habe ein paar andere Websites gesehen, die dies tun, aber ich hoffe, dass ich einige Best Practices, Tipps oder Gotchas erhalten kann, wenn ich daran arbeite, dies umzusetzen.

Answer 1

Rückkehr zurück, um meine eigene Frage zu beantworten- ich kann bezeugen, dass die URL-Codierung (nur teilweise) in unserer Produktionsumgebung vollkommen in Ordnung gearbeitet hat.

Ex. Quelle JSON:

{"mode":21,"popup":18,"windowId":2}

Ex. in URL codiert:

http://example.com/my-ajax-app#%7B%22mode%22:21,%22popup%22:18,%22windowId%22:2%7D

Für kleine Mengen JSON, wie oben, hatten wir keine Probleme mit Browsern (bis nach IE7 sogar). Größere JSON -Saiten, die wir nicht getestet haben.

Answer 2

Ich würde tatsächlich davon abrufen, Daten in JSON zu verkaps und sie dann in den Hash einzubeziehen. Der Grund dafür ist, dass JSON selbst viel Markup benötigt und tatsächlich einige Sicherheitslöcher öffnet, da Sie später Code bewerten müssen, der direkt vom Benutzer kommt.

Als bessere Alternative würde ich empfehlen, mit X-Www-Form-Urscoded als Kapselung zu verwenden. Zum Beispiel, wenn dies Ihr Statusobjekt ist:

var stateObject = {
  userName: 'John Doe',
  age: 31
}

Dann würden Sie ein Hash -Fragment wie folgt erstellen:

// Create an array to build the output string.
var hashPartBuffer = [];
for (var k in stateObject) {
  hashPartBuffer.push(
    encodeURIComponent(k),
    '=',
    encodeURIComponent(stateObject[k]),
    '&'); 
}
if (hashPartBuffer.length) {
  // Remove the last element from the string buffer
  // which is '&'.
  hashPartBuffer.pop();
}
var hashPartString = hashPartBuffer.join('');
// This will now be 'userName=John%20Doe&age=31'

Dann werden Sie dies zurück analysieren, bis:

var hashPartString = 'userName=John%20Doe&age=31';
var pairs = hashPartString.split(/&/);
var stateObject = {};
for (var i = 0; i < pairs.length; i++) {
  var keyValue = pairs.split(/=/);
  // Validate that this has the right structure.
  if (keyValue.length == 2) {
    stateObject[keyValue[0]] = keyValue[1];
  }
}