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

Ответ 1

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

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

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

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

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

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

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

Руководство по хранению MDN DOM (связанное ниже), имеет обходные методы/полиполки, которые в конечном итоге возвращаются к материалам, подобным куки, если 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
• Сохранение объектов - Сохранение объектов в локальном хранилище HTML5

Ответ 2

В дополнение к файлам cookie и localStorage, по крайней мере, еще одно место, где вы можете хранить "полупостоянные" данные клиента: window.name. Любое строковое значение, которое вы назначаете window.name, останется там до закрытия окна.

Чтобы проверить это, просто откройте консоль и введите window.name = "foo", затем обновите страницу и введите window.name; он должен ответить foo.

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

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

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

Ответ 3

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

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

Пример: использование localStorage и библиотека файлов cookie

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

Ответ 4

Вы можете сделать это, сохранив файлы cookie на стороне клиента.