Как заставить JS-переменную сохранять значение после обновления страницы?

Это возможно с помощью window.localStorage или window.sessionStorage. Разница в том, что sessionStorage длится до тех пор, пока браузер остается открытым, аlocalStorage` сохраняется после перезапуска браузера. Сохранение применяется ко всему веб-сайту, а не только к отдельной его странице.

Если вам нужно задать переменную, которая должна отразиться на следующей странице (страницах), используйте:

var someVarName = "value";
localStorage.setItem("someVarKey", someVarName);

А на любой странице (например, когда страница загрузилась) задайте ее как:

var someVarName = localStorage.getItem("someVarKey");

.getItem() вернет null, если значение не сохранено, или сохраненное значение.

Обратите внимание, что в этом хранилище могут храниться только строковые значения, но это можно обойти, используя JSON.stringify и JSON.parse. Технически, всякий раз, когда вы вызываете .setItem(), он будет вызывать .toString() для значения и сохранять его.

В руководстве MDN' по хранению DOM (ссылка ниже) есть обходные пути/полифиллы, которые в конечном итоге возвращаются к таким вещам, как cookies, если localStorage недоступен.

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

Ссылки:

• Браузер Storage - https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage
• localStorage - https://developer.mozilla.org/en-US/docs/DOM/Storage#localStorage
• JSON - https://developer.mozilla.org/en-US/docs/JSON
• Совместимость с браузерными хранилищами - http://caniuse.com/namevalue-storage
• Хранение объектов - https://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage

В дополнение к печенье и localStorage, там's по крайней мере в одном месте вы можете хранить на "полу-постоянные" и данных клиента: окна.имя. Любое строковое значение, которое вы назначаете окно`.имя будет оставаться там, пока окно не закроется.

Чтобы проверить, просто откройте консоль и окно типа.название = на "фу" В, затем обновите страницу и введите окно.имя; он не должен реагировать с Foo.

Это немного рубить, но если вы Don'т хотим, печенье с наполнителем ненужных данных отправляется на сервер при каждом запросе, и если вы можете'т использовать хранилище localStorage` по каким-то причинам (старые клиенты), это может быть хорошим вариантом для рассмотрения.

окна`.имя обладает еще одним интересным свойством: он's видимое для окон из других доменов; его's не подчиняется тем же происхождения политики как и почти любой другой собственности "окно". Так, помимо хранения на "полу-постоянные" в данных, когда пользователь переходит или обновит страницу, вы можете также использовать его для CORS-бесплатная кросс-доменной коммуникации.

Обратите внимание, что окно.название можно хранить только строки, но с широкой доступности формат JSON, это стоило'т быть большой проблемой даже для сложных данных.

Чтобы сохранить значение при обновлении страницы, необходимо использовать cookie. Вы можете использовать любую из множества библиотек cookie на основе javascript, чтобы упростить доступ к cookie, например эту.

Если вы хотите поддерживать только html5, вы можете подумать о Storage api, например localStorage/sessionStorage.

Пример: использование localStorage и cookies library

var mode = getStoredValue('myPageMode');

function buttonClick(mode) {
    mode = mode;
    storeValue('myPageMode', mode);
}

function storeValue(key, value) {
    if (localStorage) {
        localStorage.setItem(key, value);
    } else {
        $.cookies.set(key, value);
    }
}

function getStoredValue(key) {
    if (localStorage) {
        return localStorage.getItem(key);
    } else {
        return $.cookies.get(key);
    }
}

Это можно сделать, сохранив куки на стороне клиента.