山东大学软件学院创新实训——项目记录（九）

在Vue.js中，使用Session Storage来存储数据是非常方便的。Session Storage 是一种 web 存储方式，允许你在一个浏览器会话期间保存数据。数据在页面关闭后会被清除，不像Local Storage那样会持久化存储。

下面是如何在Vue.js中使用Session Storage的示例：

存储数据

1. 直接在组件中使用

你可以在Vue组件的生命周期方法或者其他方法中直接使用sessionStorage对象来存储数据：

export default {
  name: 'MyComponent',
  methods: {
    saveData() {
      sessionStorage.setItem('key', 'value');
    }
  },
  mounted() {
    // 例如，在组件挂载时保存数据
    this.saveData();
  }
}

2. 封装为一个服务

你可以将Session Storage的操作封装成一个服务，以便在不同的组件中重用：

// @/utils/sessionStorageService.js
export const sessionStorageService = {
  setItem(key, value) {
    sessionStorage.setItem(key, value);
  },
  getItem(key) {
    return sessionStorage.getItem(key);
  },
  removeItem(key) {
    sessionStorage.removeItem(key);
  },
  clear() {
    sessionStorage.clear();
  }
};

然后在组件中使用这个服务：

import { sessionStorageService } from '@/utils/sessionStorageService.js';

export default {
  name: 'MyComponent',
  methods: {
    saveData() {
      sessionStorageService.setItem('key', 'value');
    },
    loadData() {
      const value = sessionStorageService.getItem('key');
      console.log(value);
    }
  },
  mounted() {
    this.saveData();
    this.loadData();
  }
}

读取数据

读取数据与存储数据类似，你可以直接在Vue组件中使用sessionStorage.getItem：

export default {
  name: 'MyComponent',
  methods: {
    loadData() {
      const value = sessionStorage.getItem('key');
      console.log(value);
    }
  },
  mounted() {
    this.loadData();
  }
}

删除数据

你可以通过sessionStorage.removeItem来删除某个特定的数据项：

export default {
  name: 'MyComponent',
  methods: {
    removeData() {
      sessionStorage.removeItem('key');
    }
  },
  mounted() {
    this.removeData();
  }
}

清除所有数据

如果你想清除所有的Session Storage数据，可以使用sessionStorage.clear：

export default {
  name: 'MyComponent',
  methods: {
    clearData() {
      sessionStorage.clear();
    }
  },
  mounted() {
    this.clearData();
  }
}

使用JSON格式存储复杂数据

如果你需要存储复杂的数据结构，例如对象或数组，可以将它们转换为JSON字符串：

export default {
  name: 'MyComponent',
  methods: {
    saveComplexData() {
      const complexData = { name: 'John', age: 30 };
      sessionStorage.setItem('user', JSON.stringify(complexData));
    },
    loadComplexData() {
      const userData = sessionStorage.getItem('user');
      if (userData) {
        const user = JSON.parse(userData);
        console.log(user);
      }
    }
  },
  mounted() {
    this.saveComplexData();
    this.loadComplexData();
  }
}

通过这种方式，你可以方便地在Vue.js应用中使用Session Storage来存储和读取数据。