localStorage 的优化

       在实际的前端开发中，我们可以对localStorage进行优化，当要对较多的用户数据进行存储时，可以将localStorage进行模块化处理，从而更加方便和高效地导入和使用 localStorage 的各个函数和方法，从而更好地实现前端应用的功能和需求，避免每次都使用 JSON.parse 函数进行数据类型的转换和处理

模块化代码

// 封装本地存储模块
export const getItem = name => {
  // 获取数据
  const data = window.localStorage.getItem(name)
  try {
    // data 可能不是json格式的字符串 用try catch 来捕获错误
    // 尝试把数据转为json对象
    return JSON.parse(data)
  } catch (err) {
    // data不是转换错误就直接返回
    return data
  }
}

export const setItem = (name, value) => {
  // 判断传过来的数据是不是对象 如果是对象就转为json格式的字符串
  if (typeof value === 'object') {
    value = JSON.stringify(value)
  }
  // 存入数据
  window.localStorage.setItem(name, value)
}
//移除
export const removeItem = name => {
  window.localStorage.removeItem(name)
}

存储

在模块中使用，可以将一个用户的 user 信息存储到 localStorage 中，例如：

import { setItem } from './storage.js';

const user = {
  token: 'abcdefg123456',
  userId: 1,
};

setItem('hm_shopping_info', user);

读取

也可以从 localStorage 中获取一个用户的 user 信息

import { getItem } from './storage.js';

const user = getItem('hm_shopping_info');

console.log(user.token); // 'abcdefg123456'
console.log(user.userId); // 1

     在实际的前端开发中，需要根据具体的情况和需求，进行权衡和考虑，从而决定是否将 localStorage 封装成一个模块，当然当存储较少的数据时，也可以进行localStorage直接存储