快捷導(dǎo)航

Vue?插件及瀏覽器本地存儲(chǔ)

更新時(shí)間：2022年05月27日 11:51:03 作者：??奔跑吧雞翅????

這篇文章主要介紹了Vue?插件及瀏覽器本地存儲(chǔ)，插件通常用來為Vue添加全局功能，包含install方法的一個(gè)對(duì)象。更多相關(guān)介紹，需要的小伙伴可以參考下面文章內(nèi)容

插件

功能：插件通常用來為 Vue 添加全局功能

本質(zhì)：包含 install 方法的一個(gè)對(duì)象，install 的第一個(gè)參數(shù)是 Vue，第二個(gè)以后的參數(shù)是插件使用者傳遞的數(shù)據(jù)

定義插件：vue官網(wǎng)是這樣描述的：Vue.js 的插件應(yīng)該暴露一個(gè) install 方法。這個(gè)方法的第一個(gè)參數(shù)是 Vue 構(gòu)造器，第二個(gè)參數(shù)是一個(gè)可選的選項(xiàng)對(duì)象

對(duì)象.install = function(Vue,options){
	//1.添加全局過濾器
	vue.filter(...)
	//2.添加全局指令
	Vue.directive(...)
	//3.配置全局混入(合)
	Vue.mixin(...)
	//4.添加實(shí)例方法
	Vue.prototype.$myMethod = function(){}
	Vue.prototype.$myProperty = xxx
}

使用插件：Vue.use()

我們著手寫一個(gè)插件，跟 main.js 同級(jí)，新增一個(gè) plugins.js

//完整寫法
/*
const obj = {
    install(){
        console.log("install");
    }
}
export default obj*/
//簡寫
export default {
    install(Vue,x,y) {
        console.log(x,y)
        //全局過濾器
        Vue.filter('mySlice', function (value) {
            return value.slice(0, 4)
        })
        //定義全局指令
        Vue.directive('fbind', {
            bind(element, binding) {
                element.value = binding.value
            },
            inserted(element, binding) {
                element.focus()
            },
            update(element, binding) {
                element.value = binding.value
            }
        })
        //定義混入
        Vue.mixin({
            data() {
                return {
                    x: 100,
                    y: 200
                }
            }
        })
        //給Vue原型上添加一個(gè)方法(vm和vc就都能用了)
        Vue.prototype.hello = ()=>{alert("hello")}
    }
}

然后在 main.js 中使用插件

//引入Vue
import Vue from 'vue';
//引入App
import App from './App';
//引入插件
import plugins from "@/plugins";
//關(guān)閉vue的生產(chǎn)提示
Vue.config.productionTip = false
//使用插件
//Vue.use(plugins)
//使用插件 并傳參數(shù)
Vue.use(plugins,1,2)
//創(chuàng)建vm
new Vue({
    el: "#app",
    render: h => h(App)
})

在 Student.vue 中測(cè)試

<template>
  <div>
    <h2>學(xué)生姓名：{{ name|mySlice }}</h2>
    <h2>學(xué)生性別：{{ sex }}</h2>
    <input type="text" v-fbind:value="name">


    <button @click="test">點(diǎn)我測(cè)試 hello 方法</button>
  </div>
</template>
<script>
export default {
  name: "Student",
  data() {
    return {
      name: "張三12345",
      sex: "男",
    }
  },
  methods: {
    test() {
      this.hello()
    }
  }
}
</script>
<style scoped>
</style>

localstorage

本地存儲(chǔ)就是把數(shù)據(jù)存儲(chǔ)到瀏覽器中，瀏覽器的關(guān)閉不會(huì)影響數(shù)據(jù)的保存。

我們通過下面的例子來展示一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀏覽器本地存儲(chǔ)</title>
</head>
<body>
<div id="root">
    <button onclick="saveData()">點(diǎn)我保存一個(gè)數(shù)據(jù)</button>
    <button onclick="readData()">點(diǎn)我讀取一個(gè)數(shù)據(jù)</button>
    <button onclick="deleteData()">點(diǎn)我刪除一個(gè)數(shù)據(jù)</button>
    <button onclick="deleteAllData()">點(diǎn)我清空數(shù)據(jù)</button>
</div>
<script type="text/javascript">
    let person = {name:"張三",age:"18"}
    function saveData() {
        localStorage.setItem("msg","hello")
        localStorage.setItem("msg2",666)
        localStorage.setItem("msg3",JSON.stringify(person))
    }
    function readData(){
        console.log(localStorage.getItem("msg"))
        console.log(localStorage.getItem("msg2"))

        const result = localStorage.getItem("msg3")
        console.log(result)
        console.log(JSON.parse(result))
    }
    function deleteData(){
        localStorage.removeItem("msg")
    }
    function deleteAllData(){
        localStorage.clear()
    }
</script>
</body>
</html>

SessionStorage

和 LocalStorage 用法相同，把上邊代碼中的 localStorage改為sessionStorage

總結(jié)

LocalStorage 和 SessionStorage 統(tǒng)稱為 WebStorage

1.存儲(chǔ)內(nèi)容大小一般支持5MB左右(不同瀏覽器可能還不一樣)
⒉瀏覽器端通過 Window.sessionStorage 和Window.localStorage屬性來實(shí)現(xiàn)本地存儲(chǔ)機(jī)制
3.相關(guān)API：

①.xxxxxStorage.setItem( " key' , "value"); 該方法接受一個(gè)鍵和值作為參數(shù)，會(huì)把鍵值對(duì)添加到存儲(chǔ)中，如果鍵名存在，則更新其對(duì)應(yīng)的值

②.xxxxxStorage.getItem( "person"); 該方法接受一個(gè)鍵名作為參數(shù)，返回健名對(duì)應(yīng)的值

③.xxxxxStorage.removeItem( "key"); 該方法接受一個(gè)鍵名作為參數(shù)，并把該鍵名從存儲(chǔ)中刪除

④.xxxxxStorage.clear() 該方法會(huì)清空存儲(chǔ)中的所有數(shù)據(jù)

4.備注：

①.SessionStorage 存儲(chǔ)的內(nèi)容會(huì)隨著瀏覽器窗口關(guān)閉而消失

②.LocalStorage 存儲(chǔ)的內(nèi)容，需要手動(dòng)清除才會(huì)消失（調(diào)用api 或清空緩存）

③. xxxxStorage.getItem(xxx)，如果 xxx 對(duì)應(yīng)的 value 獲取不到，那么 getltem 的返回值是null ④.JSON.parse(null) 的結(jié)果依然是 null

TodoList 改為本地存儲(chǔ)

我們之前寫的 TodoList 案例數(shù)據(jù)是寫死的，每次刷新都恢復(fù)到寫死的數(shù)據(jù)，我們現(xiàn)在把它改為本地存儲(chǔ)。修改 App.vue，把 todos 改為深度監(jiān)視，每當(dāng) todos 發(fā)生變化就使用本地存儲(chǔ)存儲(chǔ)數(shù)據(jù)。同時(shí)初始化的時(shí)候，todos 賦值是從本地存儲(chǔ)讀取的

......
<script>
......
export default {
  ......
  data() {
    return {
      //讀取本地存儲(chǔ)
      todos: JSON.parse(localStorage.getItem("todos")) || []
    }
  },
  methods: {
    ......
  },
  watch:{
    //深度監(jiān)視
    todos:{
      deep:true,
      handler(value){
        localStorage.setItem("todos",JSON.stringify(value))
      }
    }
  }
}
</script>
......

運(yùn)行程序，輸入數(shù)據(jù)，刷新瀏覽器，數(shù)據(jù)不會(huì)消失