Vue.js sessionstorage 使用

sessionstorage 当用户关闭浏览器窗口后，数据会被删除。

当我点击登录的时候输入用户名和密码，这里我只简单的将输入的值存入session中

首先我先将登录和登出样式写好

    <div class="user">
            <img src="../../../static/image/mymap/login.png" width="30" height="30" />
            <a v-if="isLogin" @click="dialogjoin = true">登陆</a>
            <a v-else  @click="userOut">登出</a>
        </div>

form中的值就是我们要在页面填写的内容，就是将form中的值存进session中 

 data() {
        return {
            dialogjoin: false,
            dialogzc:false,
            form:{
                username:"",
                password:""
            },
            isLogin:true,
        }
    },

sessionStorage.setItem("key", "value");

他的存储方式为键值对方式，注意的是我们要先将我们的数据转成字符串格式，在进行存值

    methods: {
        onSubmit(){
            this.dialogjoin = false
            this.dialogzc=true
        },
        userLogin(){
            if(this.form.username && this.form.password){
                console.log(222222222,"---------")
                let userInfo = JSON.stringify(this.form);
                console.log(userInfo,999)
                sessionStorage.setItem("userInfo",userInfo); 
                this.dialogjoin = false;
                this.isLogin=false;
            }
            else{
                this.dialogjoin = false;
            }
             
        },
        userOut(){
            // this.dialogjoin = true;
            sessionStorage.clear();
            this.isLogin=true
        }

当我们要登出的时候sessionStorage.clear();这个就可以在中删除了 

 取值的时候我在页面加载的时候写的，这样刷新就不会没有了 

    mounted() {
        if(sessionStorage.getItem("userInfo")){
            this.isLogin=false
        }
    }