在URL哈希/片段中存储JSON的最佳实践

Question

我正在构建一个单页AJAX应用程序，并希望在某些情况下在URL哈希（＃）之后在JSON中存储状态。我见过其他两个网站都这样做，但我希望在我实施这个过程中获得一些最佳实践，技巧或陷阱。

Answer 1

说回回答我自己的问题 - 我可以证明，URL编码（甚至只是部分）JSON字符串在我们的生产环境中工作得非常好。

Ex。源JSON：

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

Ex。在URL中编码：

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

对于少量的JSON如上，我们在任何浏览器（甚至可以追溯到IE7）都没有问题。我们还没有测试过更大的JSON字符串。

Answer 2

我实际上建议不要将数据封装到json中，然后将其放入哈希中。 原因是JSON本身需要大量标记，并且实际上会打开一些安全漏洞，因为您必须稍后评估直接来自用户的代码。

作为一个更好的选择，我会建议使用x-www-form-urlencoded作为封装。例如，如果这是你的状态对象：

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

然后，你将创建一个哈希代码是这样的：

// 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' 

然后你会分析这个回来：

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]; 
    } 
}