(Temp) Хранение результатов поиска JSON в веб-приложении

Question

Я работаю над функцией поиска для своего веб-приложения (только для HTML, JS &). Я использую метод .getjson() jQuery для извлечения данных из фида и отображения этих результатов на странице. Внутри оператора .each() я добавляю разметку HTML к результатам, в результате чего некоторые элементы связаны с внешними источниками.

Проблема заключается в том, что посетитель инициирует поиск в моем веб-приложении и нажимает на ссылку из результатов на внешнюю страницу, затем использует кнопку «Назад» в браузере, чтобы вернуться на страницу результатов, весь поиск результаты очищаются, и необходимо начать другой поиск.

Я бы хотел временно сохранить результаты поиска, поэтому, если пользователь нажимает на ссылку из результатов, затем нажимает кнопку «Назад», чтобы вернуться в приложение, все результаты будут доступны без нового для другого поиск.

Принимая этот шаг дальше, было бы также здорово, что результаты для прошлых поисков также сохраняются, поэтому, если посетитель продолжает нажимать кнопку «Назад», они могут видеть все свои предыдущие поиски (с заданным пределом, конечно) ,

HTML5 sessionStorage кажется идеальным для этого, но информация, которую я нашел, указывает на утомительное решение для кодирования. Не могу ли я просто сохранить все результаты json в качестве объекта JS и повторить ли их каждое мое заявление, когда посетитель нажмет кнопку «Назад»? Я определенно открыт для использования библиотеки кода или плагина для этой проблемы.

Answer 1

http://brian.io/lawnchair/ - хорошая библиотека для API для настойчивости.Вы можете использовать тот же синтаксис, что и абстракция для разных вариантов хранения. http://brian.io/lawnchair/adapters/

Answer 2

У вас есть два способа приблизиться к этой проблеме, одна из них кэширует результаты на вашем сервере и заполняет представление по требованию, а номер два - как вы уже упоминали - используйте sessionStorage. sessionStorage (IMO) имеет очень простой API. Вы можете использовать sessionStorage.setItem (ключ, значение) или sessionStorage.getItem (key) - доступны и другие методы, такие как sessionStorage.key (index), sessionStorage.removeItem (key) и sessionStorage.clear(). Вероятно, было бы полезно включить решение polyfill кроссбраузерный для sessionStorage, вы можете проверить «Web Storage» polyfills раздел на Modernizr: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills - Весело: -/

Answer 3

Off верхней части моей головы:

Каждый раз, когда пользователь выполняет поиск, измените хэш в URL-адресе на уникальную строку (например, «search- {userInput)» ... вы могли бы, конечно, просто забыть о «поиске», но мне нравятся мои URL-адреса в Симпатичная). Это должно дать вам поддержку на задней панели. Затем:

Альтернатива A: Слушайте событие hashChange, проанализируйте window.location.hash и отправьте запрос на ваш URL-адрес поиска. Теоретически, если вы не добавили временную метку к URL-адресу или сумасшедшим вещам, то здесь должен быть задействован механизм кеширования вашего браузера. Если нет, это означает дополнительный запрос, но это должно быть хорошо, не так ли?

Альтернатива B: Расширьте существующий механизм поиска, скопировав результаты на localStorage (просто не забудьте JSON.stringify его заранее и используйте клавишу something-{timestamp}). Затем слушайте событие hashChange и вытащите результаты из своего локального хранилища. Лично я бы не рекомендовал это решение, поскольку вы забиваете localStorage (у afaik есть предел в 2,5 мб для некоторых браузеров).

Возможно, вам придется найти способы обойти отсутствующую поддержку браузера, по крайней мере, для события hashChange, JSON stringify/parse и LocalStorage, но я с оптимизмом смотрю, что на данный момент имеется достаточно libs/plugins.

Answer 4

Вы считаете слишком сложным: ваша поисковая форма, скорее всего, не изменит URL! Используйте GET вместо POST, и у вас есть желаемый результат. Сейчас браузер не имеет возможности узнать, в каком состоянии веб-сайта вы хотите, чтобы показать, и по умолчанию показывает первый - пустую форму поиска

Кэширование может быть добавлен как было предложено, но на самом деле это не проблема здесь