Указать значение по умолчанию для элемента локального хранилища HTML5?

Question

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

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

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

Большинство языков программирования, которые имеют дело с сохранением пар ключ / значение, предлагают некоторый способ задания значений по умолчанию (например, интерфейсы файла конфигурации.ini). Я ожидал что-то вроде этого:

var preference = localStorage.getItem('some-key', 'Default Value');

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

Answer 1

Нет, такой встроенной функциональности нет. Смотрите спецификацию для Storage интерфейс:

interface Storage {
  readonly attribute unsigned long length;
  DOMString? key(unsigned long index);
  getter DOMString getItem(DOMString key);
  setter creator void setItem(DOMString key, DOMString value);
  deleter void removeItem(DOMString key);
  void clear();
};

И следующая строка просто для подтверждения того, что дальше:

getItem(key) Метод должен возвращать текущее значение, связанное с данным ключом. Если данный ключ не существует в списке, связанном с объектом, тогда этот метод должен возвратить нуль.

Вы можете просто использовать обычные методы. Примерно так должно быть хорошо:

var preference = localStorage.getItem('some-key') || 'Default Value';

Answer 2

Решение от Джеймса:

var preference = localStorage.getItem('some-key') || 'Default Value';

Работает, только если вы никогда не сохраняете пустые строки ИЛИ логические ИЛИ, если ваша переменная может быть 0.

Решение, которое дольше, но всегда работает:

var preference = localStorage.getItem('some-key');
if(null === preference)
{
    preference = 'Default Value';
}

Answer 3

Вы можете использовать этот метод для объектов

/*
Helper function that return an object from local storage or a default value
*/
function getObjectFromLocalstorage(key, default_value){
  var value = localStorage.getItem(key);
  if (value === null){
    return default_value;
  }
  return JSON.parse(value);
}

И вот несколько примеров выходных данных:

console.log(getObjectFromLocalstorage("some_undefined_key", {}));
>>> {}

console.log(getObjectFromLocalstorage("some_undefined_key", []));
>>> []

var value = {a: 1}; 
localStorage.setItem("defined_key", JSON.stringify(value));
getObjectFromLocalstorage("defined_key", {});
>>> {a: 1}

Answer 4

Лучший способ - простая проверка при загрузке страницы

      let preference = localStorage.getItem('some-key');

window.addEventListener("load", () => {
  if (null === preference) {
    localStorage.setItem("some-key", "Default Value");
  }
});

Answer 5

Если вам нужно использовать объекты json, это чистый способ сделать это:

const defaultPreferences = {
  darkMode: true,
  language: 'es',
};

// Read, with fallback to default value
let preferences = JSON.parse(localStorage.getItem('preferences')) || defaultPreferences;

И вот как вам нужно сохранить в localStorage:

preferences.language = 'fr';

// Write, always in JSON
localStorage.setItem('preferences', JSON.stringify(preferences));

Примечание: не забывайте сохранять в localStorage каждый раз, когда вы изменяете preferences переменная, чтобы поддерживать согласованность.