Сохранение переменных между загрузками страниц

поскольку 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. Поэтому, когда страница загружается снова с этой строкой запроса, вы можете проверить, была ли нажата кнопка.

To читать эти данные, вы можете использовать следующий скрипт при загрузке страницы:

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');

(источник)

возможность использовать это зависит от того, как ваша форма в настоящее время работает, если вы уже используете сообщение, то это может быть проблематично.

кроме того, для больших наборов данных это меньше, чем оптимальный. Передача строки не имеет большого значения, но для массивов и объектов данных вы, вероятно, должны использовать веб-хранилище или куки. Хотя детали немного отличаются в разных браузерах практический предел длины URI составляет около 2000 символов

---

Web Storage

С введением HTML5 мы также получили веб-хранилище, которое позволяет сохранять информацию в браузере при загрузке страниц. Есть localStorage который может сохранять данные в течение более длительного периода (до тех пор, пока пользователь не очистит его вручную) и sessionStorage который сохраняет данные только во время текущего сеанса просмотра. Последняя полезно для вас здесь, потому что вы не хотите, чтобы "щелкнуло" значение true, когда пользователь вернется позже.

здесь я устанавливаю хранилище на событие нажатия кнопки, но вы также можете привязать его к форме отправки или что-нибудь еще.

$('input[type="submit"][value="Search"]').click(function() {
    sessionStorage.setItem('clicked', 'true');
});

затем при загрузке страницы, вы можете проверить, если он установлен с помощью этого:

var clicked = sessionStorage.getItem('clicked');

несмотря на то, что это значение сохраняется только во время этого сеанса просмотра, возможно, вы захотите сбросить его раньше. Так поступать, использование:

sessionStorage.removeItem('clicked');

если вы хотите сохранить объект или массив JS, вы должны преобразовать его в строку. Согласно спецификации, должно быть возможно сохранить другие типы данных, но это еще не правильно реализовано в браузерах.

//set
localStorage.setItem('myObject', JSON.stringify(myObject));

//get
var myObject = JSON.parse(localStorage.getItem('myObject'));

поддержка браузеров здорово таким образом, вы должны быть в безопасности, чтобы использовать это, если вам не нужно поддерживать действительно старые/неясные браузеры. Веб-хранения будущее.

---

Cookies

альтернативой веб-хранилищу является сохранение данных в файле cookie. Куки-файлы в основном предназначены для чтения данных на стороне сервера, но могут быть использованы и для чисто клиентских данных.

вы уже используете jQuery, что делает настройку cookies довольно простой. Опять же, я использую click событие здесь, но может быть использован в любом месте.

$('input[type="submit"][value="Search"]').click(function() {
    $.cookie('clicked', 'true', {expires: 1}); // expires in 1 day
});

затем на странице загрузки вы можете прочитать куки, как это:

var clicked = $.cookie('clicked');

поскольку куки сохраняются в сеансах в вашем случае, вам нужно будет отключить их, как только вы сделаете все, что вам нужно сделать с ним. Вы не хотите, чтобы пользователь вернулся через день и все еще имел clicked значение true.

if(clicked === "true") {
    //doYourStuff();
    $.cookie('clicked', null);
}

(не-jQuery способ установить / прочитать куки можно найти здесь)

я лично не стал бы использовать cookie для чего-то простого, как запоминание состояния щелчка, но если строка запроса это не вариант, и вам нужно поддерживать действительно старые браузеры, которые не поддерживают sessionStorage это будет работать. Вы должны реализовать это с проверкой для sessionStorage во-первых, и только если это не удается использовать метод cookie.

---

window.name

хотя это кажется мне взломом, который, вероятно, возник до localStorage/sessionStorage, вы можете хранить информацию в window.name свойства:

window.name = "my value"

он может только храните строки, поэтому, если вы хотите сохранить объект, вам придется его stringify так же, как и выше localStorage пример:

window.name = JSON.stringify({ clicked: true });

основное различие заключается в том, что эта информация сохраняется не только в обновлениях страниц, но и в разных доменах. Однако он ограничен текущей вкладкой, в которой вы находитесь.

это означает, что вы можете сохранить некоторую информацию на своей странице, и пока пользователь остается на этой вкладке, вы можете получить доступ к той же информации, даже если он просматривал еще один сайт и обратно. В общем, я бы посоветовал не использовать это, если вам нужно хранить междоменной информации в течение одного сеанса.