使用localStorage挂钩 - Javascript

在Javascript中，我们可以使用localStorage对象将数据存储在用户的本地存储中。在使用这个对象时，我们有时需要挂钩一些逻辑来增加我们的代码的可读性和可维护性。在本文中，我们将讨论使用localStorage挂钩的一些最佳实践。

检查localStorage是否可用

在使用localStorage之前，我们需要检查用户的浏览器是否支持本地存储。为了达到这个目的，我们可以编写一个简单的函数来检查localStorage是否可用。

function storageAvailable(type) {
  try {
    var storage = window[type];
    var x = '__storage_test__';
    storage.setItem(x, x);
    storage.removeItem(x);
    return true;
  }
  catch(e) {
    return e instanceof DOMException && (
      // everything except Firefox
      e.code === 22 ||
      // Firefox
      e.code === 1014 ||
      // test name field too, because code might not be present
      // everything except Firefox
      e.name === 'QuotaExceededError' ||
      // Firefox
      e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
      // acknowledge QuotaExceededError only if there's something already stored
      (storage && storage.length !== 0);
  }
}

这个函数会尝试使用localStorage存储、读取数据，在尝试过程中如果出现错误，则说明localStorage不可用。

封装localStorage

为了使我们的代码更加模块化，我们可以为localStorage对象创建一个封装。这个封装可以使用一个简单的类来完成。

class LocalStorage {
  
  constructor() {
    this.storage = window.localStorage;
  }

  setItem(key, value) {
    this.storage.setItem(key, JSON.stringify(value));
  }

  getItem(key) {
    const value = this.storage.getItem(key);
    return value && JSON.parse(value);
  }

  removeItem(key) {
    this.storage.removeItem(key);
  }
}

这个类将localStorage封装起来，使我们可以像使用一个普通的对象一样使用它。这个类还添加了JSON.stringify和JSON.parse来使存储和读取的数据都是一个JSON对象。

使用挂钩

使用localStorage挂钩可以让我们在数据存储时添加一些逻辑。例如，如果你想计算一个数组中数字的总和并将其存储在localStorage中，则可以使用以下代码。

const sumArray = (arr) => arr.reduce((acc, value) => acc + value, 0);

class LocalStorageWithSum {

  constructor() {
    this.storage = new LocalStorage();
  }

  setArray(key, arr) {
    this.storage.setItem(key, { sum: sumArray(arr), values: arr });
  }

  getArray(key) {
    return this.storage.getItem(key);
  }

}

这个类添加了一个setArray方法，可以计算传递给它的数组的总和并将其存储在localStorage中，同时还将原始数组存储在同一个对象中。在需要访问存储的数组时，我们可以使用getArray方法，该方法将返回一个JSON对象，该对象包含存储的数组和它的总和。

总结

使用localStorage时，添加挂钩可以让我们在存储数据时添加逻辑。我们可以写一个函数或创建一个类来封装localStorage。这些挂钩可以帮助我们提高代码的可读性和可维护性，并为我们提供更好的代码复用率。