Vue2学习day06—浏览器本地存储&组件的自定义事件&全局事件总线（GlobalEventBus）&消息订阅与发布（pubsub）&nextTick

本文链接：https://blog.csdn.net/Happy_change/article/details/123496966

这篇博客详细介绍了Vue2中组件间的通信方法，包括浏览器本地存储的使用，如localStorage和sessionStorage；组件的自定义事件，用于子组件向父组件传递数据；全局事件总线(GlobalEventBus)，实现任意组件间的通信；消息订阅与发布(pubsub)机制；以及$nextTick在DOM更新后的应用。文中通过TodoList案例展示了这些概念的实际运用。

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

文章目录

Vue2学习day06—浏览器本地存储&组件的自定义事件&全局事件总线（GlobalEventBus）&消息订阅与发布（pubsub）&nextTick

Vue2学习day06—浏览器本地存储&组件的自定义事件&全局事件总线（GlobalEventBus）&消息订阅与发布（pubsub）&nextTick

浏览器本地存储

存储内容大小一般支持5MB左右（不同浏览器可能还不一样）
浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。
相关API：
- xxxxxStorage.setItem(‘key’, ‘value’);
  该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。
- xxxxxStorage.getItem(‘person’);
  该方法接受一个键名作为参数，返回键名对应的值。
- xxxxxStorage.removeItem(‘key’);
  该方法接受一个键名作为参数，并把该键名从存储中删除。
- xxxxxStorage.clear()
  该方法会清空存储中的所有数据。

示例：

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>localStorage</title>
</head>
<body>
    <h2>localStorage</h2>
    <button onclick="saveData()">点我保存一个数据</button>
    <button onclick="readData()">点我读取一个数据</button>
    <button onclick="deleteData()">点我删除一个数据</button>
    <button onclick="deleteAllData()">点我清空数据</button>

    <script type="text/javascript">
        let p = {
        name:'张三',age:18}
        function saveData(){
        
            // window.localStorage key value 都得是字符串
            localStorage.setItem('msg','hello!')
            // 会自动调对象的toString
            // localStorage.setItem('person',p)
            localStorage.setItem('person',JSON.stringify(p))
        }

        function readData(){
        
            console.log(localStorage.getItem('msg'))
            const person = localStorage.getItem('person')
            console.log(JSON.parse(person))
        }

        function deleteData(){
        
            localStorage.removeItem('msg')
        }

        function deleteAllData(){
        
            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>sessionStorage</title>
</head>
<body>
    <h2>sessionStorage  浏览器一关就没了</h2>
    <button onclick="saveData()">点我保存一个数据</button>
    <button onclick="readData()">点我读取一个数据</button>
    <button onclick="deleteData()">点我删除一个数据</button>
    <button onclick="deleteAllData()">点我清空数据</button>

    <script type="text/javascript">
        let p = {
        name:'张三',age:18}
        function saveData(){
        
            // window.sessionStorage key value 都得是字符串