下次展示是用户最后一次操作的基础用法本地存储（Local Storage）前端

最新推荐文章于 2024-07-16 17:18:30 发布

你猜692

最新推荐文章于 2024-07-16 17:18:30 发布

阅读量79

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/weixin_64261457/article/details/138787320

版权

export default {
  data() {
    return {
      stuShow: true, // 默认初始状态设为卡片展示
    };
  },
  methods: {
    /**
     * 切换展示模式的方法
     */
    toggleDisplay() {
      // 切换stuShow的布尔值
      //this.stuShow = !this.stuShow;

      // 根据stuShow的当前值，将展示模式保存到本地存储
      window.localStorage.setItem('displayMode', this.stuShow ? 'card' : 'list');
    }
  },
  created() {
    // 页面加载时，尝试从本地存储中恢复展示模式
    const initialDisplay = window.localStorage.getItem('displayMode');

    // 如果存在之前保存的展示模式，则根据其值设置stuShow
    if (initialDisplay) {
      this.stuShow = initialDisplay === 'card';
    }
  }
}