Question

如果您尝试获取不存在的本地存储项，是否可以为该项设置默认值？

例如，假设在您的网络应用中，各种UI首选项都保存在本地存储中。当用户离开您的网站然后返回时，将根据从其本地存储中提取的值设置UI。这很有效。

但是，当用户首次访问您的网络应用时，这些本地存储空间值尚不存在。因此，当您的JavaScript尝试获取这些本地存储项时，它们都将是未定义的。是否有办法在每个本地存储项不存在的情况下为每个本地存储项指定默认值？

大多数处理保存键/值对的编程语言都提供了一种指定默认值的排序方式（想想.ini配置文件接口）。我期待这样的事情：

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

另外，我知道我可以通过测试它们是否为空/未定义而可以轻松地以编程方式设置默认值并相应地设置值，但我想看看这是否内置于本地存储键/值对中并且也许我只是没有看到它。如果不存在此功能，我将最终编写一些基本的本地存储包装函数，这些函数会添加此功能。

Answer 1

不，没有这样的内置功能。请参阅Storage interface的规范：

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)方法必须返回与给定键关联的当前值。如果与对象关联的列表中不存在给定键，则此方法必须返回null 。

您可以使用常用技巧。这样的事应该没问题：

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

如果必须使用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));

注意：请记住，每次修改preferences变量时都要保存到localStorage，以保持一致性。

指定HTML5本地存储项的默认值？

4 个答案: