Vue?插件及瀏覽器本地存儲

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

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

插件

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

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

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

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

使用插件：Vue.use()

我們著手寫一個插件，跟 main.js 同級，新增一個 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原型上添加一個方法(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 中測試

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


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

localstorage

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀏覽器本地存儲</title>
</head>
<body>
<div id="root">
    <button onclick="saveData()">點我保存一個數(shù)據(jù)</button>
    <button onclick="readData()">點我讀取一個數(shù)據(jù)</button>
    <button onclick="deleteData()">點我刪除一個數(shù)據(jù)</button>
    <button onclick="deleteAllData()">點我清空數(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.存儲內(nèi)容大小一般支持5MB左右(不同瀏覽器可能還不一樣)
⒉瀏覽器端通過 Window.sessionStorage 和Window.localStorage屬性來實現(xiàn)本地存儲機(jī)制
3.相關(guān)API：

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

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

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

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

4.備注：

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

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

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

TodoList 改為本地存儲

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

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

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