Ответ 1
Поскольку HTTP является безстоящим, каждый раз, когда вы загружаете страницу, он будет использовать начальные значения того, что вы установили в JavaScript. Вы не можете установить глобальную переменную в JS и просто оставить это значение после загрузки страницы еще раз.
Есть несколько способов сохранить значение в другом месте, чтобы вы могли инициализировать его при загрузке с помощью JavaScript
Строка запроса
При отправке формы с использованием метода GET URL-адрес обновляется с помощью строки запроса (?parameter=value&something=42). Вы можете использовать это, установив поле ввода в форме на определенное значение. Это был бы самый простой пример:
<form method="GET">
<input type="hidden" name="clicked" value="true" />
<input type="submit" />
</form>
При начальной загрузке страницы строка запроса не задана. Когда вы отправляете эту форму, комбинация ввода name и value вводится в строке запроса как clicked=true. Поэтому, когда страница загружается снова с помощью этой строки запроса, вы можете проверить, была ли нажата кнопка.
Чтобы прочитать эти данные, вы можете использовать следующие script при загрузке страницы:
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
var clicked = getParameterByName('clicked');
(Источник)
Возможность использования этого зависит от того, как ваша форма работает в данный момент, если вы уже используете POST, это может быть проблематично.
Кроме того, для более крупных наборов данных это менее оптимально. Передача строки - это не большая проблема, но для массивов и объектов данных вы, вероятно, должны использовать веб-хранилище или файлы cookie. Хотя данные немного отличаются друг от друга в браузерах, практический предел длины URI составляет 2000 символов
Веб-хранилище
С введением HTML5 мы также получили веб-хранилище, которое позволяет сохранять информацию в браузере на разных страницах. Существует localStorage, который может сохранять данные в течение более длительного периода (пока пользователь не очистит его вручную) и sessionStorage, который сохраняет данные только во время текущего сеанса просмотра. Последнее полезно для вас здесь, потому что вы не хотите, чтобы "clicked" был установлен в true, когда пользователь возвращается позже.
Здесь я устанавливаю хранилище на событие нажатия кнопки, но вы также можете привязать его к форме submit или что-то еще.
$('input[type="submit"][value="Search"]').click(function() {
sessionStorage.setItem('clicked', 'true');
});
Затем, когда вы загружаете страницу, вы можете проверить, установлено ли это с помощью этого:
var clicked = sessionStorage.getItem('clicked');
Несмотря на то, что это значение сохраняется только во время сеанса просмотра, возможно, вы захотите его reset ранее. Для этого используйте:
sessionStorage.removeItem('clicked');
Если вы хотите сохранить объект или массив JS, вы должны преобразовать его в строку. Согласно спецификации, должно быть возможно сохранить другие типы данных, но это пока неправильно реализовано в браузерах.
//set
localStorage.setItem('myObject', JSON.stringify(myObject));
//get
var myObject = JSON.parse(localStorage.getItem('myObject'));
Поддержка браузера довольно хорошая, поэтому вы должны быть в безопасности, чтобы использовать это, если вам не нужно поддерживать действительно старые/неясные браузеры. Веб-хранилище - это будущее.
Cookies
Альтернативой веб-хранилищу является сохранение данных в файле cookie. Файлы cookie в основном предназначены для чтения данных на стороне сервера, но могут использоваться и для чисто клиентских данных.
Вы уже используете jQuery, что упрощает настройку файлов cookie. Опять же, здесь я использую событие click, но его можно использовать где угодно.
$('input[type="submit"][value="Search"]').click(function() {
$.cookie('clicked', 'true', {expires: 1}); // expires in 1 day
});
Затем при загрузке страницы вы можете прочитать файл cookie следующим образом:
var clicked = $.cookie('clicked');
Поскольку файлы cookie сохраняются на всех сеансах в вашем случае, вам нужно будет их отключить, как только вы сделаете все, что вам нужно сделать. Вы не хотите, чтобы пользователь возвращался через день и все еще имел clicked значение true.
if(clicked === "true") {
//doYourStuff();
$.cookie('clicked', null);
}
(здесь не поддерживается jQuery для установки/чтения файлов cookie здесь)
Я лично не использовал бы cookie для чего-то простого, поскольку помню состояние щелчка, но если строка запроса не является опцией, и вам нужно поддерживать действительно старые браузеры, которые не поддерживают sessionStorage, это будет работать. Вы должны реализовать это, сначала проверив sessionStorage, и только если это не поможет, используйте метод cookie.
window.name
Хотя это кажется взломом для меня, который, вероятно, произошел из-за localStorage/sessionStorage, вы могли хранить информацию в свойстве window.name:
window.name = "my value"
Он может хранить только строки, поэтому, если вы хотите сохранить объект, вам придется его спрятать так же, как приведенный выше пример localStorage:
window.name = JSON.stringify({ clicked: true });
Основное отличие заключается в том, что эта информация сохраняется не только для обновления страниц, но и для разных доменов. Однако он ограничен текущей вкладкой, в которой вы находитесь.
Это означает, что вы можете сохранить некоторую информацию на своей странице, и пока пользователь остается на этой вкладке, вы можете получить доступ к этой же информации, даже если он перешел на другой веб-сайт и обратно. В общем, я бы посоветовал использовать это, если вам не нужно фактически хранить кросс-доменную информацию в течение одного сеанса просмотра.