¿Especificar el valor predeterminado para el elemento de almacenamiento local de HTML5?

En el caso de que intente obtener un elemento de almacenamiento local que no existe, ¿es posible establecer un valor predeterminado para ese elemento?

Por ejemplo, supongamos que en su aplicación web, varias preferencias de IU se guardan en el almacenamiento local. Cuando un usuario abandona su sitio web y luego regresa, la interfaz de usuario se configura de acuerdo con los valores extraídos de su almacenamiento local. Esto funciona muy bien.

Sin embargo, cuando un usuario visita su aplicación web por primera vez, esos valores de almacenamiento local aún no existen. Entonces, cuando su JavaScript intente obtener esos elementos de almacenamiento local, todos estarán indefinidos. ¿No hay una forma de especificar valores predeterminados para cada elemento de almacenamiento local en caso de que no exista?

La mayoría de los lenguajes de programación que se ocupan de guardar pares clave/valor ofrecen alguna forma de especificar valores predeterminados (piense en las interfaces de archivos de configuración .ini). Me esperaba algo como esto:

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

Además, sé que puedo establecer fácilmente mediante programación los valores predeterminados probando si son nulos/indefinidos o no y establecer el valor en consecuencia, pero quería ver si esto estaba integrado en la recuperación del par de clave/valor de almacenamiento local y que tal vez yo simplemente no lo estaba viendo. Si esta función no existe, terminaré simplemente escribiendo algunas funciones básicas de contenedor de almacenamiento local que agregan esta función.

No, no existe tal funcionalidad integrada. Consulte las especificaciones de la Storage interfaz:

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

Y la siguiente línea solo para confirmarlo más:

los getItem(key) El método debe devolver el valor actual asociado con la clave dada. Si la clave dada no existe en la lista asociada con el objeto, entonces este método debe devolver nulo.

Puedes usar las técnicas habituales. Algo como esto debería estar bien:

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

La solución de James:

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

Solo funciona si nunca guarda cadenas vacías O booleanos O si su variable puede ser 0.

Solución que es más larga pero siempre funciona:

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

Puedes usar este método para objetos.

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

Y aquí hay algunos resultados de ejemplo:

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}

La mejor manera es simplemente verificar cuando carga la página.

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

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