Vue子應用父的方法的小案例，以及關於h5localStorage
阿新 • • 發佈：2018-12-24
h5的localStorage 和cookie的區別
-
localStorage的儲存容量比cookie更大；
-
cookie作為http規範的一部分，它的主要作用是與伺服器進行互動，使http保持連線狀態。也就是你每次請求一個新的頁面的時候，cookie都會被髮送過去，這樣無形中就浪費了寬頻。
-
cookie儲存是能指定可以訪問該cookie的範圍；localStorage的訪問範圍就是當前整個網站，不存在訪問範圍這個概念。且，兩者都不支援跨域呼叫。
-
html5中的Web Storage包括了兩種儲存方式： sessionStorage和localStorage；
-
sessionStorage用於本地儲存一個會話的資料，當會話結束時，儲存的資料也會自動銷燬（即當頁面關閉的同時也銷燬資料），因此，sessionStorage不是一個持久化的本地儲存，僅僅是會話級別的儲存。
-
localStorage用於持久化的本地儲存，除非手動刪除資料，否則會一直儲存
localStorage的一些方法
新增鍵值對： localStorage.setItem(key,value); 獲取鍵值對： localStorage.getItem(key); 刪除鍵值對： localStorage.removeItem(key); 清除所有鍵值對： localStorage.clear(); 獲取localStorage的屬性名稱（鍵名稱）： localStorage.key(index); 獲取localStorage中儲存的鍵值對的數量： localStorage.length;
Vue 評論案例
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css"> <script src="./lib/vue-2.4.0.js"></script> </head> <body> <div id='app'> <addinfo @func='show'></addinfo> <ul class="list-group" > <div v-for='(item,index) in person' :key='index'> <li class="list-group-item">{{item.say}} <span class="badge">{{item.dataTime}}</span> <span class="badge">{{item.name}}</span> </li> </div> </ul> </div> <template id='add'> <div class="form-group"> <div class="form-group"> 姓名<input type="text" class="form-control" v-model='name1'> 名句<input type="text" class="form-control" v-model='say1'> </div> <button class="btn btn-primary" @click='addfun' >新增</button> </div> </template> <script> var vm = new Vue({ el:'#app', data:{ person:[ {name:'李白',say:'天生我才必有用',dataTime:new Date()}, {name:'杜甫',say:'吹風吹又生',dataTime:new Date()}, {name:'曹植',say:'本是同根生',dataTime:new Date()} ] }, mounted:function(){ this.show(); }, methods:{ show(){ this.person=JSON.parse(localStorage.getItem('info')||'[]') } }, components:{ 'addinfo':{ template:'#add', data(){ return { name1:'', say1:'' } }, methods:{ addfun(){ var info = {name:this.name1,say:this.say1,dataTime:new Date()} var buff = JSON.parse(localStorage.getItem('info')||'[]'); buff.push(info); localStorage.setItem('info',JSON.stringify(buff)) this.say1=this.name1=''; this.$emit('func'); } } } } }) </script> </body> </html>