巧用封装，轻松搞定localStorage和sessionStorage

在前端开发中，我们经常需要存储一些数据，比如用户登录信息、购物车信息等。localStorage和sessionStorage是两个非常有用的本地存储技术，可以帮助我们轻松实现数据持久化。

但是，在使用localStorage和sessionStorage时，我们通常需要对数据进行序列化和反序列化操作。这是因为，localStorage和sessionStorage只能存储字符串类型的数据。如果我们要存储复杂的数据类型，比如数组、对象等，就需要先将它们转换成字符串，然后再存储。

为了简化操作，我们可以对localStorage和sessionStorage进行简单的封装。封装后的storage可以自动将数据序列化和反序列化，使用起来更加方便。

下面是封装后的storage的代码：

// 封装localStorage
const ls = {
  setItem: (key, value) => {
    if (typeof value === 'object') {
      value = JSON.stringify(value);
    }
    localStorage.setItem(key, value);
  },
  getItem: (key) => {
    const value = localStorage.getItem(key);
    if (value && value[0] === '{' && value[value.length - 1] === '}') {
      return JSON.parse(value);
    }
    return value;
  },
  removeItem: (key) => {
    localStorage.removeItem(key);
  },
  clear: () => {
    localStorage.clear();
  }
};

// 封装sessionStorage
const ss = {
  setItem: (key, value) => {
    if (typeof value === 'object') {
      value = JSON.stringify(value);
    }
    sessionStorage.setItem(key, value);
  },
  getItem: (key) => {
    const value = sessionStorage.getItem(key);
    if (value && value[0] === '{' && value[value.length - 1] === '}') {
      return JSON.parse(value);
    }
    return value;
  },
  removeItem: (key) => {
    sessionStorage.removeItem(key);
  },
  clear: () => {
    sessionStorage.clear();
  }
};

使用封装后的storage，我们可以像使用普通的对象一样操作数据。例如：

// 将一个对象存储到localStorage
ls.setItem('user', {
  name: '张三',
  age: 18
});

// 从localStorage中获取一个对象
const user = ls.getItem('user');

// 打印对象的属性
console.log(user.name); // 输出：张三
console.log(user.age); // 输出：18

通过对localStorage和sessionStorage进行简单的封装，我们可以更加方便地存储和获取复杂的数据类型。这可以使我们的代码更加简洁和易于维护。