vue sessionstorage

// 使用 Vue 和 sessionStorage 的示例代码

// 在 Vue 组件中使用 sessionStorage 来存储和读取数据

<template>
  <div>
    <input v-model="name" placeholder="请输入名字" />
    <button @click="saveName">保存名字</button>
    <p>存储的名字: {{ storedName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      storedName: ''
    };
  },
  methods: {
    saveName() {
      // 将输入的名字保存到 sessionStorage 中
      sessionStorage.setItem('userName', this.name);
      this.storedName = this.name;
      alert('名字已保存');
    }
  },
  created() {
    // 页面加载时从 sessionStorage 中读取名字
    this.storedName = sessionStorage.getItem('userName') || '无';
  }
};
</script>

解释说明：

1. 模板部分 (<template>):

   • 包含一个输入框 (<input>) 和一个按钮 (<button>)，用户可以在输入框中输入名字，并通过点击按钮保存名字。
   • 还有一个 <p> 标签用于显示从 sessionStorage 中读取的名字。

2. 脚本部分 (<script>):

   • data 函数返回一个对象，包含两个属性：name 用于绑定输入框的值，storedName 用于显示从 sessionStorage 中读取的名字。
   • methods 中定义了 saveName 方法，当用户点击按钮时调用此方法，将输入的名字保存到 sessionStorage 中，并更新 storedName。
   • created 生命周期钩子在组件创建时调用，从 sessionStorage 中读取名字并赋值给 storedName。如果 sessionStorage 中没有存储的名字，则显示默认值 '无'。

3. sessionStorage:

   • sessionStorage 是一种浏览器内置的存储机制，它允许我们在浏览器会话期间存储数据。关闭浏览器标签或窗口后，数据会被清除。
   • 使用 sessionStorage.setItem(key, value) 可以保存数据，使用 sessionStorage.getItem(key) 可以读取数据。