localstorage和vue結合使用

父組件

 1 <template>
 2   <div class="hello">
 3     <p>Original message:"{{message}}"</p><br/>
 4     <input v-model="newTodoText" v-on:keyup.enter="addNewText" placeholder="Add a todo">
 5     <ul>
 6       <li is="tab2" v-for="(todo,index) in todos" :key="todo.id" :title="todo.title" @remove="todos.splice(index,1)">
 7       </li>
 8     </ul>
 9   </div>
10 </template>
11 
12 <script>
13 import store from '@/store/todo_list.js'
14 import Tab2 from '@/components/tab2/tab2'
15 export default {
16   components:{Tab2},
17   data () {
18     return {
19       message:"Hello",
20       newTodoText:'',
21       todos: store.fetch(),
22       nextTodoId: 4
23     }
24   },
25   watch:{
26     todos:function(val){
27       console.log(val);
28       store.save(val);
29     }
30   },
31   computed:{
32 
33   },
34   methods: {
35     addNewText: function () {
36       this.todos.push({
37         id: this.nextTodoId++,
38         title: this.newTodoText
39       })
40       this.newTodoText = ''
41     }
42   }
43 }
44 </script>
45 
46 <!-- Add "scoped" attribute to limit CSS to this component only -->
47 <style scoped>
48 h1, h2 {
49   font-weight: normal;
50 }
51 
52 ul {
53   list-style-type: none;
54   padding: 0;
55 }
56 
57 li {
58   display: inline-block;
59   margin: 0 10px;
60 }
61 
62 a {
63   color: #42b983;
64 }
65 .active{
66   color:red;
67 }
68 .text-danger{
69   color:green;
70 }
71 </style>

todo_list.js

 1 const STORAGE_KEY = 'todos-vuejs'
 2 
 3 export default {
 4 
 5   fetch: function() {
 6 
 7     return window.JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]')
 8 
 9   },
10 
11   save: function(items) {
12 
13     window.localStorage.setItem(STORAGE_KEY, window.JSON.stringify(items))
14 
15   }
16 
17 }

子組件返回刪除按鈕

 1 <template>
 2     <li>{{title}}
 3         <button v-on:click="close">X</button>
 4     </li>
 5 </template>
 6 <script>
 7 export default{
 8     props:['title'],
 9     data(){
10         return{
11 
12         }
13     },
14     methods:{
15         close(){
16             this.$emit('remove');
17         }
18     }
19 }
20 </script>
21 <style>
22 </style>

效果

接一篇本身寫的

引入jquery和bootstrap查考我vue分類裏面的隨便，

我這裏在頁面裏面構建了本身的storage全局工具類

  1 <template>
  2   <div class="container">
  3         <form role="form">
  4             <div class="form-group">
  5                 <label for="username">用戶名:</label>
  6                 <input type="text" id="username" class="form-control" placeholder="輸入用戶名" 
　　　　　　　　　　　　v-model.trim="username">
  7             </div>
  8             <div class="form-group">
  9                 <label for="age">年　齡:</label>
 10                 <input type="text" id="age" class="form-control" placeholder="輸入年齡" v-model.trim="age">
 11             </div>
 12             <div class="form-group">
 13                 <input type="button" value="添加" class="btn btn-primary" @click="add()">
 14                 <input type="button" value="重置" class="btn btn-danger">
 15             </div>
 16         </form>
 17         <hr>
 18         <table class="table table-bordered table-hover">
 19             <caption class="h2 text-info">用戶信息表</caption>
 20             <tr class="text-danger">
 21                 <th class="text-center">序號</th>
 22                 <th class="text-center">名字</th>
 23                 <th class="text-center">年齡</th>
 24                 <th class="text-center">操做</th>
 25             </tr>
 26             <tr class="text-center" v-for="(item,index) in myData">
 27                 <td>{{index}}</td>
 28                 <td>{{item.name}}</td>
 29                 <td>{{item.age}}</td>
 30                 <td>
 31                     <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer" 
　　　　　　　　　　　　　　@click="nowIndex==index">刪除</button>
 32                 </td>
 33             </tr>
 34             
 35             <tr v-show="myData.length!=0">
 36                 <td colspan="4" class="text-right">
 37                     <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#layer" 
　　　　　　　　　　　　　　　　v-on:click="nowIndex=-2">刪除所有</button>
 38                 </td>
 39             </tr>
 40             <tr v-show="myData.length==0">
 41                 <td colspan="4" class="text-center text-muted">
 42                     <p>暫無數據....</p>
 43                 </td>
 44             </tr>
 45         </table>
 46 
 47         <!--模態框 彈出框-->
 48         <div role="dialog" class="modal fade bs-example-modal-sm" id="layer">
 49             <div class="modal-dialog">
 50                 <div class="modal-content">
 51                     <div class="modal-header">
 52                         <button type="button" class="close" data-dismiss="modal">
 53                             <span>&times;</span>
 54                         </button>
 55                         <h4 class="modal-title">確認刪除麼?</h4>
 56                     </div>
 57                     <div class="modal-body text-right">
 58                         <button data-dismiss="modal" class="btn btn-primary btn-sm">取消</button>
 59                         <button data-dismiss="modal" class="btn btn-danger btn-sm" 
　　　　　　　　　　　　　　　　　　@click="deleteMsg(nowIndex)">確認</button>
 60                     </div>
 61                 </div>
 62             </div>
 63         </div>
 64     </div>
 65 </template>
 66 
 67 <script>
 68 export default {
 69   name: 'HelloWorld',
 70   data () {
 71     return {
 72       myData:[],
 73       username:'',
 74       age:'',
 75       nowIndex:-100
 76     }
 77   },
 78   created(){
 79     if(this.$storage.getStorage("myData-list")){
 80       var index=this.$storage.getStorage("myData-list");
 81       this.myData=index;
 82     }
 83   },
 84   watch:{
 85     myData:function(nowVal,oldVal){
 86       this.$storage.setStorage("myData-list",nowVal);
 87     }
 88   },
 89   methods:{
 90     add(){
 91       if(this.username.length==0 || this.age.length==0){
 92         alert("用戶名或年齡不爲空");
 93       }else{
 94         this.myData.push({
 95           name:this.username,
 96           age:this.age
 97         });
 98         this.username="";
 99         this.age=""
100       }
101     },
102     deleteMsg(n){
103       if(n==-2){
104           this.myData=[];
105       }else{
106           this.myData.splice(n,1);
107       }
108     }
109   }
110 }
111 </script>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

參考連接：http://www.cnblogs.com/yingzi1028/p/7774954.html