全新的 Local，session，cookie 三合一封装

最近，我一直在研究一种将 Local，session，cookie 三合一封装的方法。这种方法使用 JavaScript 来创建和取回 cookie 的值，从而使开发人员能够轻松地存储和检索数据。

这种方法的优点是简单易用，并且可以在所有主流浏览器中使用。此外，这种方法还可以用于存储各种类型的数据，包括字符串、数字、数组和对象。

为了使用这种方法，你需要首先创建一个 JavaScript 文件。在这个文件中，你需要定义一个名为 Storage 的类。这个类将包含存储和检索数据的各种方法。

class Storage {
  constructor() {
    this.local = localStorage;
    this.session = sessionStorage;
    this.cookie = document.cookie;
  }

  setItem(key, value) {
    this.local.setItem(key, value);
    this.session.setItem(key, value);
    this.cookie = `${key}=${value}; path=/`;
  }

  getItem(key) {
    const localValue = this.local.getItem(key);
    const sessionValue = this.session.getItem(key);
    const cookieValue = this.cookie.split('; ').find(item => item.startsWith(`${key}=`));

    if (cookieValue) {
      return cookieValue.split('=')[1];
    } else if (sessionValue) {
      return sessionValue;
    } else if (localValue) {
      return localValue;
    }

    return null;
  }

  removeItem(key) {
    this.local.removeItem(key);
    this.session.removeItem(key);
    this.cookie = `${key}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`;
  }
}

然后，你就可以使用这个类来存储和检索数据了。例如，要存储一个名为 username 的字符串，你可以使用以下代码：

const storage = new Storage();
storage.setItem('username', 'John Doe');

要检索这个字符串，你可以使用以下代码：

const username = storage.getItem('username');

这种方法可以用于存储各种类型的数据，包括字符串、数字、数组和对象。

我最近在开发一个新的 web 应用程序时使用了这种方法。我使用这个方法来存储用户的登录信息和购物车中的商品。这种方法非常简单易用，并且可以很好地满足我的需求。

我希望这种方法对你也同样有用。如果你有任何问题，请随时留言。