初学Vue（全家桶）-第12天（vue2）：插件、scoped属性、WebStorage浏览器存储

本文链接：https://blog.csdn.net/lalala_dxf/article/details/125084453

初学Vue

1、插件使用

功能
用于增强Vue
本质
包含install方法的一个对象，isntall的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。
定义插件
创建一个js文件

let obj = {}
obj.install = function(Vue,options){
	// 插件中可以实现各种功能：
	// 1. 添加全局过滤器
	Vue.filter(...)
	// 2. 添加全局指令
	Vue.directive(...)
	// 3. 添加全局混入
	Vue.mixin(...)
	// 4.等等操作
	......
}

// 暴露
export default obj

使用插件
Vue.use(插件名)

2、scoped属性

问题描述：
两个组件设置的样式有重名的情况时则会出现问题，例如先被引入的组件中的样式会被后引入的样式覆盖掉
解决
同时给各个组件中的样式添加一个scoped属性
scoped属性的返回值是布尔值，作用是让当前组件中的样式只在当前组件生效，所以即使别的组件中有同名的样式那也不会报错。

第一个组件中的样式
在这里插入图片描述
第二个组件中的样式

此时查看控制台

需要注意的是App.vue并不适用这个属性，因为这个组件是所有组件的父组件，其下的组件不受App.vue中的样式影响，但App中的html标签会受影响。

3、WebStorage浏览器存储

浏览器端通过Window.sessionStorage（会话存储）和Window.localStorage（本地存储）属性来实现存储机制。

这两种存储方式的特点：
1、这两种存储不会自动把数据发送给服务器，仅在本地保存。
2、存储大小有区别：
（1）本地存储大概20M
（2）会话存储大概5M 不同浏览器不同大小，需看情况
3、数据有效期不同：
（1）本地存储始终有效，即便窗口或浏览器关闭也一直保存
（2）会话存储只在浏览器窗口关闭之前有效
4、作用域不同：
（1）本地存储在所有同源窗口中共享
（2）会话存储不在不同浏览器窗口中共享，即便是同一个页面

相关API：
- xxxStorage.setItem(“key”,“value”);
  - 该方法接收一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。
- xxxStorage.getItem(“key”);
  - 该方法接收一个键名作为参数，返回键名对应的值
- xxxStorage.removeItem(“key”);
  - 该方法接收一个键名作为参数，并把该键名对应的键值对从存储中删除
- xxxStorage.clear()
  - 该方法会清空存储中的所有数据。

3.1 本地存储

<!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>浏览器本地存储</title>
</head>
<body> 
    <h1>localStorage</h1>
    <button onclick="saveData()">点我保存数据</button>
    <button onclick="getData()">点我获取数据</button>
    <button onclick="removeData()">点我删除一个数据</button>
    <button onclick="clearDatas()">点我清空所有数据</button>

    <script>
        const obj = {name:"jerry",age:19}

        // 保存数据
        function saveData(){
            localStorage.setItem("001","jack");
            localStorage.setItem("002","rose");
            // localStorage.setItem("003",obj); // [object,object]
            localStorage.setItem("003",JSON.stringify(obj)); // 保存一个对象，并将对象转换为JSON字符串形式

        }

        // 获取数据
        function getData(){
            console.log(localStorage.getItem("001"));
            console.log(localStorage.getItem("002"));
            // console.log(localStorage.getItem("003")); // [object,object]
            const result = localStorage.getItem("003"); // result接收到的值是JSON字符串
            console.log(result); // {"name":"jerry","age":19}
            console.log(JSON.parse(result)); // 使用JSON.parse将JSON字符串转为原来的类型。{name: 'jerry', age: 19}
        }

        // 移除一个数据
        function removeData(){
           localStorage.removeItem("001")
        }

        // 清空所有数据
        function clearDatas(){
            localStorage.clear();
        }
    </script>
</body>
</html>

在这里插入图片描述

3.2 会话存储

与本地存储不同的是会话存储的内容会随着浏览器窗口的关闭而销毁。

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>浏览器本地存储</title>
</head>
<body> 
    <h1>sessionStorage</h1>
    <button onclick="saveData()">点我保存数据</button>
    <button onclick="getData()">点我获取数据</button>
    <button onclick="removeData()">点我删除一个数据</button>
    <button onclick="clearDatas()">点我清空所有数据</button>

    <script>
        const obj = {name:"jerry",age:19}

        // 保存数据
        function saveData(){
            sessionStorage.setItem("001","jack");
            sessionStorage.setItem("002","rose");
            // sessionStorage.setItem("003",obj); // [object,object]
            sessionStorage.setItem("003",JSON.stringify(obj)); // 保存一个对象，并将对象转换为JSON字符串形式

        }

        // 获取数据
        function getData(){
            console.log(sessionStorage.getItem("001"));
            console.log(sessionStorage.getItem("002"));
            // console.log(sessionStorage.getItem("003")); // [object,object]
            const result = sessionStorage.getItem("003"); // result接收到的值是JSON字符串
            console.log(result); // {"name":"jerry","age":19}
            console.log(JSON.parse(result)); // 使用JSON.parse将JSON字符串转为原来的类型。{name: 'jerry', age: 19}
        }

        // 移除一个数据
        function removeData(){
           sessionStorage.removeItem("001")
        }

        // 清空所有数据
        function clearDatas(){
            sessionStorage.clear();
        }
    </script>
</body>
</html>