Сохранение переменной Javascript для дальнейшего использования?

Мне было интересно, есть ли способ сохранить одну или несколько переменных JavaScript на локальном компьютере, а затем вызвать их позже?

var a = b

и затем, когда вы возвращаетесь на веб-страницу, она запоминает значение, которое было B?

4 ответа

Решение

То, что вы ищете, вероятно, как сделать и использовать куки.

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

Если вы имеете в виду в веб-браузере, есть два варианта:

Cookies универсально поддерживаются браузерами, хотя пользователи могут их отключать. API для них в JavaScript действительно очень плохой. Файлы cookie также отправляются на ваш сервер, поэтому они увеличивают размер запросов к вашему серверу, но могут использоваться как на стороне клиента, так и на стороне сервера.

Установить cookie очень просто, но чтение cookie на стороне клиента является проблемой. Посмотрите на странице MDN выше для примеров.

Веб-хранилище поддерживается всеми основными современными браузерами (включая IE8 и выше). API намного лучше, чем куки. Веб-хранилище является чисто клиентской стороной, данные не отправляются на сервер автоматически (вы, конечно, можете отправить их самостоятельно).

Вот пример использования веб-хранилища: Live Copy

<label>Value: <input type="text" id="theValue"></label>
<input type="button" id="setValue" value="Set">
<script>
(function() {
  // Use an input to show the current value and let
  // the user set a new one
  var input = document.getElementById("theValue");

  // Reading the value, which was store as "theValue"
  if (localStorage && 'theValue' in localStorage) {
    input.value = localStorage.theValue;
  }

  document.getElementById("setValue").onclick = function () {
    // Writing the value
    localStorage && (localStorage.theValue = input.value);
  };
})();
</script>

У вас есть три варианта сохранения состояния, которые вы можете получить позже на другой веб-странице в том же домене:

  1. Сохраните данные в файле cookie, а затем на будущей веб-странице получите данные из файла cookie.

  2. Сохраните данные в локальном хранилище в браузере пользователя, а затем извлеките данные из локального хранилища на будущей веб-странице.

  3. Сохраните данные на стороне сервера каким-либо образом (с помощью post или ajax-вызова), а затем либо попросите сервер вернуть их в следующий вызов страницы, либо запросите их у сервера с помощью ajax-вызова.

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

// save data value
localStorage.setItem("name", "John");

// retrieve data value
var name = localStorage.getItem("name");

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

Вы можете попробовать локальное хранилище HTML5, используя Modernizr lib.

Пример:

if (Modernizr.localstorage) {
    localStorage.setItem("bar", "1");
    var foo = localStorage.getItem("bar");
} else {
    // local storage unavailable
}
Другие вопросы по тегам