Я создаю одностраничное приложение AJAX и хотел бы при определенных обстоятельствах сохранять состояние в JSON после хэша URL-адреса (#). Я видел пару других сайтов, делающих это, но я надеюсь получить некоторые передовые практики, советы или ошибки, когда я работаю над реализацией этого.
2 ответа
Возвращаясь к ответу на свой вопрос - я могу засвидетельствовать, что кодирование URL (хотя бы частично) строки JSON отлично работает в нашей производственной среде.
Бывший. исходный JSON:
{"mode":21,"popup":18,"windowId":2}
Бывший. закодировано в URL:
http://example.com/my-ajax-app#%7B%22mode%22:21,%22popup%22:18,%22windowId%22:2%7D
Для небольших объемов JSON, таких как указано выше, у нас не было проблем ни в одном браузере (даже в IE7). Строки JSON большего размера мы не тестировали.
На самом деле я бы посоветовал не инкапсулировать данные в 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];
}
}
var keyValue = pairs.split(/=/);
должно быть var keyValue = pairs[i].split(/=/);
stateObject[decodeURIComponent(keyValue[0])] = decodeURIComponent(keyValue[1]);
Похожие вопросы
Новые вопросы
ajax
AJAX (асинхронный JavaScript и XML) — это метод создания интерактивных пользовательских интерфейсов веб-сайтов без традиционного обновления или перезагрузки веб-страницы. Он использует асинхронный обмен данными между клиентом и сервером, чтобы обновлять отображаемую информацию и беспрепятственно реагировать на взаимодействие с пользователем. Включите дополнительные теги для языков программирования, библиотек, фреймворков, веб-браузеров, протоколов и другой информации об окружающей среде.