使用vue2写一个 localstorage

的封装库，实现数据的存储和读取。以下是示例代码：

const storage = {
  set(key, value) {
    localStorage.setItem(key, JSON.stringify(value))
  },
  get(key) {
    const value = localStorage.getItem(key)
    return value ? JSON.parse(value) : null
  },
  remove(key) {
    localStorage.removeItem(key)
  },
  clear() {
    localStorage.clear()
  }
}

你可以通过调用 `storage.set(key, value)` 存储数据，通过 `storage.get(key)` 读取数据，通过 `storage.remove(key)` 删除指定的数据，通过 `storage.clear()` 删除所有数据。

相关问题

vue2通过watch监听localStorage的值

在 Vue 2 中，你可以通过 `watch` 函数监听 `localStorage` 的值。以下是示例代码：

export default {
  data() {
    return {
      myValue: ''
    }
  },
  mounted() {
    // 初始化 myValue 的值
    this.myValue = localStorage.getItem('myKey')
    // 监听 myValue 的变化
    this.$watch('myValue', this.handleMyValueChange)
  },
  beforeDestroy() {
    // 取消监听 myValue 的变化
    this.$unwatch('myValue', this.handleMyValueChange)
  },
  methods: {
    handleMyValueChange(value) {
      // 将变化后的 myValue 的值保存到 localStorage 中
      localStorage.setItem('myKey', value)
    }
  }
}

在上面的代码中，我们在 `mounted` 钩子函数中初始化了 `myValue` 的值，并且使用 `$watch` 函数来监听 `myValue` 的变化。在 `handleMyValueChange` 方法中，我们将变化后的 `myValue` 的值保存到 `localStorage` 中。当组件销毁时，我们使用 `$unwatch` 函数来取消监听 `myValue` 的变化。这样，每当 `localStorage` 中的值发生变化时，组件中的 `myValue` 数据属性也会跟着变化，并且会将变化后的值保存到 `localStorage` 中。

vue进入页面前清除localstorage

在Vue进入页面之前，我们可以使用以下方式清除localStorage。

localStorage是浏览器提供的一种存储数据的机制，可以将数据保存在用户的本地浏览器中。

要清除localStorage，我们可以使用以下代码：

localStorage.clear();

这将清除localStorage中存储的所有数据。

在Vue中，可以在Vue实例的生命周期钩子中清除localStorage。例如，在created或mounted钩子中添加以下代码：

created() {
  localStorage.clear();
}

// 或者

mounted() {
  localStorage.clear();
}

这样，在Vue实例创建或挂载到DOM之前，localStorage中的数据就会被清除掉。

这样做的目的可能是为了确保每次进入页面时，都是一个全新的状态，没有旧数据的影响。

需要注意的是，这样做会清除localStorage中的所有数据，包括其他页面存储的数据，所以请谨慎使用。如果只想清除特定的数据，可以使用removeItem()方法来删除localStorage中的特定项。