Vue 插件及瀏覽器本地存儲

Posted on by

插件

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

本質：包含 install 方法的一個對象，install 的第一個參數是 Vue，第二個以後的參數是插件使用者傳遞的數據

定義插件：vue官網是這樣描述的：Vue.js 的插件應該暴露一個 install 方法。這個方法的第一個參數是 Vue 構造器，第二個參數是一個可選的選項對象

對象.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";
//關閉vue的生產提示
Vue.config.productionTip = false
//使用插件
//Vue.use(plugins)
//使用插件 並傳參數
Vue.use(plugins,1,2)
//創建vm
new Vue({
    el: "#app",
    render: h => h(App)
})

在 Student.vue 中測試

<template>
  <div>
    <h2>學生姓名：{{ name|mySlice }}</h2>
    <h2>學生性別：{{ 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

本地存儲就是把數據存儲到瀏覽器中，瀏覽器的關閉不會影響數據的保存。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀏覽器本地存儲</title>
</head>
<body>
<div id="root">
    <button onclick="saveData()">點我保存一個數據</button>
    <button onclick="readData()">點我讀取一個數據</button>
    <button onclick="deleteData()">點我刪除一個數據</button>
    <button onclick="deleteAllData()">點我清空數據</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

總結

LocalStorage 和 SessionStorage 統稱為 WebStorage

  • 1.存儲內容大小一般支持5MB左右(不同瀏覽器可能還不一樣)
  • ⒉瀏覽器端通過 Window.sessionStorage 和Window.localStorage屬性來實現本地存儲機制
  • 3.相關API：

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

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

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

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

4.備註：

①.SessionStorage 存儲的內容會隨著瀏覽器窗口關閉而消失

②.LocalStorage 存儲的內容，需要手動清除才會消失（調用api 或 清空緩存）

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

TodoList 改為本地存儲

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

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

運行程序，輸入數據，刷新瀏覽器，數據不會消失

到此這篇關於Vue 插件及瀏覽器本地存儲的文章就介紹到這瞭,更多相關Vue 插件內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：