vue——webStorage、sessionStorage、localstorage、组件的自定义事件

最新推荐文章于 2024-09-04 08:57:50 发布

h_jQuery

最新推荐文章于 2024-09-04 08:57:50 发布

阅读量375

点赞数

本文链接：https://blog.csdn.net/h_jQuery/article/details/119937477

版权

javascript 同时被 3 个专栏收录

124 篇文章 0 订阅

订阅专栏

Vue

87 篇文章 0 订阅

订阅专栏

es6

73 篇文章 0 订阅

订阅专栏

本文详细介绍了webStorage中的localStorage和sessionStorage的区别，包括存储容量、生命周期、API操作和注意事项。通过实例演示了如何在HTML中使用它们来持久化数据，并探讨了组件间的自定义事件和父子组件通信的方法。

摘要由CSDN通过智能技术生成

webStorage

1.存储内容大小一般支持5MB左右（不同的浏览器可能不一样）

2.浏览器端通过window.sessionStorage和window.localStorage属性来实现本地存储机制

3.相关API：

1.xxxxxStorage.setItem(‘key’,'value)：该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名已存在，则更新其对应的值

2.xxxxxStorage.getItem(‘key’)：该方法接受一个键名作为参数，返回键名对应的值

3.xxxxxStorage.remoteItem(‘key’)：该方法接受一个键名作为参数，并把该键名从存储中删除

4.xxxxxStorage.clear()：该方法会清空存储中的所有数据

4.备注：

1.sessionStorage存储的内容会随着浏览器窗口的关闭而消失

2.localStorage存储的内容，需要手动清除才会消失

3.xxxxxStorage.getItem(‘key’)，如果key对应的value获取不到（或者key不在存储中），则返回的是null

4.JSON.parse(null)的结果依然是null

localstorage

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h2>localStorage</h2>
    <button onclick="saveData()">点我保存一个数据</button>
    <button onclick="getData()">点我读取一个数据</button>
    <button onclick="delData()">点我删除一个数据</button>
    <button onclick="clearData()">点我清空所有数据</button>
    <p>localStorage：把浏览器关闭后，数据依然存在本地。清除方式：1.引导用户触发某个函数，将本地存储的数据删除；2.用户自己手动的清理浏览器缓存，也可以清除掉</p>
    <script>
        // 存储数据
        function saveData() {
            let obj = {
                name: '张三',
                age: 20
            };
            // window.localStorage.setItem('msg', 'hello')
            // 两个参数都是string类型的数据，若第二个参数不是string类型的，也会自动转换成string类型
            localStorage.setItem('msg', 'hello');
            localStorage.setItem('msg1', 999999);
            // JSON.stringify()：将对象转成字符串
            localStorage.setItem('obj', JSON.stringify(obj));
        }
        // 读取数据
        // 如果读取一个不存在的数据，返回的是Null
        function getData() {
            // 读取存储在本地的msg的值,返回msg的值
            // localStorage.getItem('msg')
            console.log(localStorage.getItem('msg'));
            console.log(localStorage.getItem('msg1'));
            // 因为存入本地的是字符串类型的数据，所以需要JSON.parse()将字符串类型的数据解析成json格式（对象）
            const res = localStorage.getItem('obj');
            // JSON.parse(null)==null
            console.log(JSON.parse(res));

        }
        // 移除指定的数据
        function delData() {
            localStorage.removeItem('msg');
            // localStorage.removeItem('msg1')

        }
        // 清空所有存在本地的数据
        function clearData() {
            localStorage.clear();
        }
    </script>
</body>

</html>

sessionStorage

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h2>sessionStorage</h2>
    <button onclick="saveData()">点我保存数据</button>
    <button onclick="getData()">点我读取数据</button>
    <button onclick="delData()">点我删除数据</button>
    <button onclick="clearData()">点我清空所有数据</button>
    <p>sessionStorage：浏览器一关，数据就跟着被删除（一次会话过程）</p>
    <script>
        // 存储数据
        function saveData() {
            let obj = {
                name: '张三',
                age: 20
            };
            sessionStorage.setItem('msg', 'hello');
            sessionStorage.setItem('msg1', 999999);
            sessionStorage.setItem('obj', JSON.stringify(obj));
        }
        // 读取数据
        function getData() {
            console.log(sessionStorage.getItem('msg'));
            console.log(sessionStorage.getItem('msg1'));
            const res = sessionStorage.getItem('obj');
            console.log(JSON.parse(res));

        }
        // 移除指定的数据
        function delData() {
            sessionStorage.removeItem('msg');

        }
        // 清空所有存在本地的数据
        function clearData() {
            sessionStorage.clear();
        }
    </script>
</body>

</html>

组件的自定义事件

1.一种组件间通信的方式，适用于：子组件==>父组件

2.使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）

3.绑定自定义事件：

3.1第一种方式，在父组件中：

<Student v-on:自定义事件名="回调函数" /> 
或<Student @自定义事件名="回调函数" />

3.2第二种方式，在父组件中：

<Student ref="xxxxx" />
methods:{
	回调函数(){
		//代码
	}
}
mounted(){
	this.$refs.xxxxx.$on("自定义事件名", 回调函数)
}

3.3若想让自定义事件只能触发一次，就可以使用once修饰符或$once方法

4.触发自定义事件：this.$emit(‘自定义事件名’,传递的数据)

5.解绑自定义事件：this.$off(‘自定义事件’)

6.组件上也可以绑定原生DOM事件，需要使用native修饰符

7.注意：通过**this. $r e f s . x x x x x .$ on(“自定义事件”, 回调函数)**绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！！

父传子用props，子传父用组件的自定义事件

子组件：

<template>
  <div class="styl">
    <p>学生姓名：{{ name }}</p>
    <p>学生年龄：{{ age }}</p>
    <p>学生性别：{{ sex }}</p>
    <button @click="sendStudent">发送学生名字给app</button>
    <button @click="unbind">解绑自定义事件</button>
    <button @click="add">age++</button>
    <button @click="death">销毁组件实例vc</button>
  </div>
</template>

<script>
export default {
  name: "Student",
  data() {
    return {
      name: "张三",
      age: 22,
      sex: "男",
    };
  },
  methods: {
    sendStudent() {
      // $emit触发事件
      // 触发Student组件实例身上的testDiy事件,并传递实参过去，因此会调用getStudent函数
      // 传递多个实参
      this.$emit("testDiy", this.name, 666, 999, 333);
      // this.$emit("testBind");
      // 若是没有用native修饰符，需要$emit触发click事件
      // this.$emit("click");
    },
    // 解绑自定义事件
    unbind() {
      // 解绑一个自定义事件
      this.$off("testDiy");
      // 解绑多个自定义事件
      // this.$off(["testDiy", "testBind"]);
      // 解绑所有的自定义事件
      // this.$off();
    },
    add() {
      console.log("age被修改了");
      this.age++;
    },
    death() {
      this.$destroy(); //销毁当前Student组件的实例，销毁后所有Student实例的自定义事件全部无效
      // 销毁之后，原生的DOM事件依然可以调用，但是响应式丢了
    },
  },
};
</script>

<style>
.styl {
  background: darkcyan;
  padding: 5px;
}
</style>

父组件：

<template>
  <!-- 都是子传父 -->
  <div class="box">
    {{ schoolName }}
    <!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据，子组件亲自调用 -->
    <School :getData="getSchool" />
    <hr />
    {{ studentName }}
    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据，触发事件，调用回调函数（第一种方式：@或者v-on） -->
    <!--由于v-on在Student组件标签上， 所以说是给Student组件的实例对象vc身上绑定了一个自定义事件：testDiy -->
    <!-- 后续如果触发了testDiy事件，getStudent函数就会被调用 -->
    <!-- .once:testDiy事件只能被触发一次 -->
    <!-- <Student v-on:testDiy.once="getStudent" /> -->
    <!-- <Student @testDiy="getStudent" @testBind="getDemo" /> -->
    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第二种方式：ref） -->
    <!-- ref的灵活性更强 -->
    <!-- 触发原生事件需要用修饰符native,否则会自动识别为自定义事件需要用$emit触发 -->
    <Student ref="studentRef" @click.native="show" />
  </div>
</template>

<script>
// 同样的样式名，Student的样式会将School的样式覆盖掉
import School from "./components/School";
import Student from "./components/Student";

export default {
  components: {
    School,
    Student,
  },
  data() {
    return {
      schoolName: "",
      studentName: "",
    };
  },
  methods: {
    show() {
      alert("native的修饰符");
    },
    getSchool(value) {
      // console.log(value);
      this.schoolName = value;
    },
    // 用val接收第一个实参，剩下的实参全部放到params数组里面去
    getStudent(val, ...params) {
      // console.log(val);
      this.studentName = val;
      console.log(params);
    },
    getDemo() {
      console.log(66666);
    },
  },
  mounted() {
    // 错误示范
    /* this.$refs.studentRef.$on("testDiy", function (val, ...params) {
      // console.log(val);
      this.studentName = val;
      console.log(params);
      // 这里的this指向触发testDiy事件的那个实例对象
      console.log(this);
    }); */
    this.$refs.studentRef.$on("testDiy", (val, ...params) => {
      // console.log(val);
      this.studentName = val;
      console.log(params);
      // 由于这是箭头函数，箭头函数没有自己this，所以向外寻找到mounted，mounted是生命周期函数，是普通函数，
      // 所以这里的this指向当前组件实例对象——app
      // console.log(this);
    });
    // 推荐使用这种形式
    // this.$refs.studentRef.$on("testDiy", this.getStudent)
    // 等过3000ms之后触发testDiy才有效
    /* setTimeout(() => {
      // this.$refs.studentRef：Student的组件实例对象
      // $on：当什么什么时候
      // 当Student组件的实例对象触发testDiy事件，就调用回调函数getStudent
      // this.$refs.studentRef.$on("testDiy", this.getStudent);绑定自定义事件
      this.$refs.studentRef.$once("testDiy", this.getStudent); //绑定自定义事件（一次性）
    }, 3000); */
  },
};
</script>

<style scoped>
.box {
  padding: 5px;
}
</style>

入口文件：

import Vue from 'vue'
import App from './App.vue'
// 关闭vue的生产提示
Vue.config.productionTip = false;
/* new Vue({
    render: h => h(App),
}).$mount('#app') */
new Vue({
    el: '#app',
    render: h => h(App),
    mounted() {
        // 3000ms之后自动销毁vm实例
        setTimeout(() => {
            this.$destroy()
        }, 3000)
    }
})