Vue3学习笔记-09

Vue3学习笔记-09

一、浏览器的本地存储

1. localStorage

localStorage:只有主动清除才会丢失

浏览器的本地存储,是js本身就已经存在的,不是Vue所带的。

主要是用于保存浏览的一些数据,例如在未登录的时候,把用户在该网站下的搜索记录进行保存。

最大的特点就是,把浏览器关闭之后,其数据还存在

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>localStoragetitle>
head>
<body>
    <h2>localStorageh2>
    <button onclick="saveData()">点击我保存一个数据button>
    <button onclick="readData()">点击我读取一个数据button>
    <button onclick="deleteData()">点击我删除一个数据button>
    <button onclick="deleteAllData()">点击我清空一个数据button>
    <script>
        let person = {name:'Tom',age:18}
        function saveData(){
            window.localStorage.setItem('name','张三')
            window.localStorage.setItem('person',JSON.stringify(person))//一json的格式(String类型)保存;保存结果是:{"name":"Tom","age":18}
            window.localStorage.setItem('person2',person)//直接使用toString方法来存,但是person.toString()的结果就是[Object,Object]; 保存结果为: [Object,Object]
            
        }
        function readData(){
           // window.localStorage.getItem('name')
           const result = localStorage.getItem('person')
           console.log(JSON.parse(result))
           console.log(localStorage.getItem('name'))
           console.log(localStorage.getItem('person2'))
        }
        function deleteData(){
           localStorage.removeItem('person') 
        }
        function deleteAllData(){
            //直接删除所有数据
           localStorage.clear()
        }
    script>
body>
html>

2. sessionStorage

浏览器一关闭之后,其中的数据就不会存在,使用的方式与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>sessionStoragetitle>
head>
<body>
    <h2>localStorageh2>
    <button onclick="saveData()">点击我保存一个数据button>
    <button onclick="readData()">点击我读取一个数据button>
    <button onclick="deleteData()">点击我删除一个数据button>
    <button onclick="deleteAllData()">点击我清空一个数据button>
    <script>
        let person = {name:'Tom',age:18}
        function saveData(){
            window.sessionStorage.setItem('name','张三')
            window.sessionStorage.setItem('person',JSON.stringify(person))//一json的格式(String类型)保存;保存结果是:{"name":"Tom","age":18}
            window.sessionStorage.setItem('person2',person)//直接使用toString方法来存,但是person.toString()的结果就是[Object,Object]; 保存结果为: [Object,Object]
            
        }
        function readData(){
           // window.sessionStorage.getItem('name')
           const result = sessionStorage.getItem('person')
           console.log(JSON.parse(result))
           console.log(sessionStorage.getItem('name'))
           console.log(sessionStorage.getItem('person2'))
        }
        function deleteData(){
           sessionStorage.removeItem('person') 
        }
        function deleteAllData(){
            //直接删除所有数据
           sessionStorage.clear()
        }
    script>
body>
html>

二、自定义事件

1.绑定自定义事件

自定义事件主要是为组件服务的。

子组件向父组件传递值:

​ 实现方式:

​ 1.通过父组件给子组件传递函数类型的props实现:子给父传递数据,要求是父组件要定义一个函数,把函数通过传递给子组件,子组件通过props进行接收函数名,之后子组件调用函数,把值作为该函数的返回值即可

​ 例子:

​ 2. 绑定自定义事件,用于做回调。都需要在父组件中定义一个函数来接收值

给谁绑定的事件,就去找谁触发

​ 3.通过ref进行自定义事件绑定

2.解绑自定义事件

3.销毁一个组件的实例对象

销毁后,所有vc实例的自定义事件全都无效

4.组件绑定原生自定义事件

需要使用native修饰符

Vue3学习笔记-09_第1张图片

你可能感兴趣的:(浏览器的本地存储,学习笔记,vue学习笔记,vue)