Vue에서 세션을 저장하는 방법-프런트엔드 Q&A-php.cn

Vue에서 세션을 저장하는 방법

PHPz

풀어 주다： 2023-04-13 10:00:03

원래의

2266명이 탐색했습니다.

Vue.js에서 세션 저장소를 사용하여 데이터를 저장하고 검색하는 것은 비교적 간단합니다. 세션 저장소는 현재 세션과 연관된 브라우저 내 저장 영역으로, 키-값 쌍으로 구성된 데이터를 저장할 수 있습니다(세션 저장소에 저장된 데이터는 세션이 종료되면 지워집니다). Vue.js에서는 sessionStorage 객체를 사용하여 키-값 쌍을 읽고 쓸 수 있습니다.

다음은 세션 저장소를 사용하여 사용자의 로그인 정보를 저장하는 예입니다.

<template>
  <div>
    <h2>用户登录</h2>
    <form>
      <div>
        <label for="username">用户名</label>
        <input type="text" name="username" v-model="username"/>
      </div>
      <div>
        <label for="password">密码</label>
        <input type="password" name="password" v-model="password"/>
      </div>
      <button @click.prevent="login()">登录</button>
    </form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login () {
      sessionStorage.setItem('username', this.username)
      sessionStorage.setItem('password', this.password)
      alert('登录成功')
    }
  }
}
</script>

로그인 후 복사

이 구성 요소에서는 sessionStorage.setItem() 메서드를 사용하여 사용자 이름과 정보를 저장합니다. 비밀번호. 이는 로그인 버튼을 클릭할 때 수행되며 입력된 데이터를 브라우저의 sessionStorage에 저장합니다. 로그인이 성공하면 이 메서드는 성공 메시지를 표시하는 프롬프트 상자를 표시합니다.

Dashboard.vue 구성 요소 만들기

<template>
  <div>
    <h2>用户主面板</h2>
    <p>欢迎 {{ username }}</p>
    <button @click.prevent="logout()">退出登录</button>
  </div>
</template>

<script>
export default {
  computed: {
    username () {
      return sessionStorage.getItem('username')
    },
  },
  methods: {
    logout () {
      sessionStorage.clear()
      alert('退出成功')
    }
  }
}
</script>

로그인 후 복사

이 구성 요소에서는 sessionStorage.getItem() 메서드를 사용하여 이전에 저장된 사용자 이름을 읽습니다. 계산에서는 sessionStorage에서 사용자 이름을 검색하는 계산 속성 사용자 이름을 정의합니다. sessionStorage.clear() 메서드를 사용하여 저장된 모든 sessionStorage 데이터를 지워 시스템을 종료하면 프롬프트 상자가 나타나 성공 메시지를 표시합니다.

Vue.js에서 Session Storage를 사용하여 데이터를 저장하고 검색하는 방법입니다. 세션 저장소는 사용자 구성, 애플리케이션 상태 등 임시 데이터를 저장하는 데 적합하지만 비밀번호와 같은 민감한 데이터는 저장하지 마세요. 민감한 데이터를 저장할 때마다 암호화나 PTP(Flat Text Storage) 프로토콜과 같은 보다 안전한 기술을 사용하여 기밀성과 보안을 보장하세요.

위 내용은 Vue에서 세션을 저장하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!