vue储存storage时含有布尔值的解决方案

当在Vue中使用localStorage或sessionStorage储存包含布尔值的数据时，会遇到数据类型转换后的问题，布尔值在localStorage或sessionStorage中只能以字符串形式存储。这意味着当我们从存储中读取布尔值时，我们需要手动将字符串转换回布尔值。下面将会提供两种思路来解决这个问题。

解决方案1：使用JSON.stringify()和JSON.parse()

可以使用JSON.stringify()将布尔值转换为字符串，使用JSON.parse()将字符串转换为布尔值。

下面是示例代码：

// 存储布尔值
localStorage.setItem("hasPaid", JSON.stringify(true));

// 读取布尔值
const hasPaid = JSON.parse(localStorage.getItem("hasPaid"));

console.log(typeof hasPaid); // 输出 "boolean"
console.log(hasPaid); // 输出 true

解决方案2：自定义储存和读取方法

另一种解决方案是自定义方法，将储存和读取方法作为Vue实例的方法，并在其中使用JSON.stringify()和JSON.parse()。这种方法可以更好地封装localStorage或sessionStorage。下面是示例代码：

export default {
  name: "MyComponent",
  methods: {
    // 储存布尔值
    setBooleanItem(key, value) {
      localStorage.setItem(key, JSON.stringify(value));
    },

    // 读取布尔值
    getBooleanItem(key) {
      const value = localStorage.getItem(key);
      return value ? JSON.parse(value) : false;
    }
  }
};

这里的setBooleanItem和getBooleanItem方法分别用于储存和读取布尔值。setBooleanItem方法接受两个参数：键和布尔值，它使用JSON.stringify()将布尔值转换为字符串并将其存储在localStorage中。getBooleanItem方法只接受一个参数：键，它从localStorage中获取值，并使用JSON.parse()将其转换为布尔值。

以上两种思路都能解决Vue中储存布尔值的问题。可以根据实际情况选择相应的方案。