使用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` 中。

vue2 localstorage

### 如何在 Vue 2 中使用 `localStorage`

#### 使用场景

当涉及到保护特定路由时，可以利用`localStorage`来存储用户的登录状态或其他重要数据。如果路径对应于受保护的路由，则需验证`localStorage`中的用户详情是否存在[^1]。

对于Vue组件内部操作`localStorage`，虽然引用材料提及的是Vue Composition API的功能，这更适用于Vue 3；然而，在Vue 2中也可以通过简单的方法访问和修改`localStorage`的数据[^2]。

#### 存储数据到 `localStorage`

为了保存信息至浏览器的本地存储，可采用如下方式：

// 假设要存入用户名"user"
localStorage.setItem('username', 'user');

此方法接受两个参数：键名（这里是'username'）以及希望储存的值。

#### 获取 `localStorage` 数据

读取已存在`localStorage`里的条目同样直观：

let storedUsername = localStorage.getItem('username');
console.log(storedUsername); // 输出 "user", 如果该项不存在则返回null

这里获取之前设置过的用户名并打印出来。

#### 删除单个项或清空整个 `localStorage`

有时可能需要移除某个具体的记录或是清除所有的本地存储内容：

// 移除指定key对应的value
localStorage.removeItem('username');

// 或者完全清空local storage
localStorage.clear();

这些命令允许灵活管理应用内的持久化数据。

#### 结合路由导航守卫实现权限控制

考虑到安全性和用户体验，可以在路由配置文件里加入导航守卫逻辑，确保只有经过身份验证后的用户才能进入某些页面。例如：

router.beforeEach((to, from, next) => {
    if (to.path === '/param') { // 判断目标地址是否为受保护资源
        const userDetails = JSON.parse(localStorage.getItem('userDetails'));
        
        if (!userDetails || !userDetails.isAuthenticated) {
            // 用户未认证情况下重定向到登陆界面或者其他处理措施
            alert("Please log in first.");
            next('/login'); 
        } else {
            next(); // 已经有有效的会话，继续前往目的地
        }
    } else {
        next(); // 对其他非敏感区域不做额外检查直接放行
    }
});

这段代码展示了如何基于`localStorage`的状态决定是否允许访问特定URL，并且提供了相应的反馈给用户。