JS项目中对本地存储进行二次的封装的实现

本地存储是指在用户的浏览器本地保存数据的技术，常见的本地存储有 Cookie、LocalStorage、SessionStorage 等。在 JS 项目开发中，为了方便使用和维护，我们可以对本地存储进行二次封装。下面是一个实现二次封装本地存储的攻略。

1. 分析需求

在设计二次封装本地存储前，需要分析业务需求，确定实现的功能和接口。下面是一个简单的需求分析，旨在演示如何分析需求。

需求：实现一个本地存储库，提供 set、get、remove 和 clear 四个方法来操作 LocalStorage。

• set：向 LocalStorage 中设置一个键值对；
• get：从 LocalStorage 中获取指定键对应的值；
• remove：从 LocalStorage 中删除指定键的数据；
• clear：清除 LocalStorage 中所有数据。

2. 设计接口

在分析完需求后，就可以设计接口了。我们需要实现一个名为 Storage 的类，该类包含四个方法：set、get、remove 和 clear。这些方法需要接收不同的参数，返回不同的结果。下面是接口设计的代码实现：

class Storage {
  /**
   * 设置 localStorage 中的值
   * @param {string} key - 要设置的键名
   * @param {any} value - 要设置的键值
   */
  set(key, value) {}

  /**
   * 获取 localStorage 中的值
   * @param {string} key - 要获取的键名
   * @returns {any} - 获取到的键值，如果不存在则返回 undefined
   */
  get(key) {}

  /**
   * 删除 localStorage 中的某个键值对
   * @param {string} key - 要删除的键名
   */
  remove(key) {}

  /**
   * 清空 localStorage
   */
  clear() {}
}

3. 实现方法

在设计好接口后，就可以开始实现每个方法了。下面是示例代码：

set 方法

class Storage {
  set(key, value) {
    if (typeof value === 'object') {
      value = JSON.stringify(value);
    }
    localStorage.setItem(key, value);
  }
}

• 该方法接收两个参数，分别是要设置的键名和键值。
• 如果传入的键值是一个对象，需要先将其转换成字符串，否则直接将其设置到 LocalStorage 中。

get 方法

class Storage {
  get(key) {
    let value = localStorage.getItem(key);
    try {
      value = JSON.parse(value);
    } catch (e) {}
    return value;
  }
}

• 该方法接收一个参数，即要获取键值的键名。
• 先从 LocalStorage 中获取对应键的值，然后尝试将其解析成 JSON 对象，如果解析失败则说明该键对应的值不是 JSON 格式的字符串，直接返回该值。

remove 方法

class Storage {
  remove(key) {
    localStorage.removeItem(key);
  }
}

• 该方法接收一个参数，即要删除的键名。
• 直接调用 LocalStorage 的 removeItem 方法删除指定键名的数据。

clear 方法

class Storage {
  clear() {
    localStorage.clear();
  }
}

• 该方法不接收参数。
• 调用 LocalStorage 的 clear 方法清空所有数据。

4. 示例应用

下面是两个示例应用，演示如何使用 Storage 类进行本地存储操作。

示例 1：存储用户信息

const userStorage = new Storage();

// 存储用户信息
userStorage.set('username', '张三');
userStorage.set('age', 25);
userStorage.set('avatar', {
  url: 'https://example.com/avatar.png',
  size: 1024,
});

// 获取用户信息
console.log(userStorage.get('username')); // 张三
console.log(userStorage.get('age')); // 25
console.log(userStorage.get('avatar')); // { url: 'https://example.com/avatar.png', size: 1024 }

// 修改用户信息
userStorage.set('username', '李四');
console.log(userStorage.get('username')); // 李四

// 删除用户信息
userStorage.remove('age');
console.log(userStorage.get('age')); // undefined

// 清空用户信息
userStorage.clear();
console.log(userStorage.get('username')); // undefined

示例 2：存储用户喜好

const likeStorage = new Storage();

// 存储用户喜好
likeStorage.set('music', ['pop', 'rock', 'jazz']);
likeStorage.set('movie', ['sci-fi', 'comedy']);
likeStorage.set('game', ['RPG', 'card']);

// 获取用户喜好
console.log(likeStorage.get('music')); // ['pop', 'rock', 'jazz']
console.log(likeStorage.get('movie')); // ['sci-fi', 'comedy']
console.log(likeStorage.get('game')); // ['RPG', 'card']

// 添加用户喜好
const music = likeStorage.get('music');
music.push('classic');
likeStorage.set('music', music);
console.log(likeStorage.get('music')); // ['pop', 'rock', 'jazz', 'classic']

// 清空用户喜好
likeStorage.clear();
console.log(likeStorage.get('music')); // undefined