localstorage和vue结合使用

父组件

 <template>
   <div class="hello">
     <p>Original message:"{{message}}"</p><br/>
     <input v-model="newTodoText" v-on:keyup.enter="addNewText" placeholder="Add a todo">
     <ul>
       <li is="tab2" v-for="(todo,index) in todos" :key="todo.id" :title="todo.title" @remove="todos.splice(index,1)">
       </li>
     </ul>
   </div>
 </template>

 <script>
 import store from '@/store/todo_list.js'
 import Tab2 from '@/components/tab2/tab2'
 export default {
   components:{Tab2},
   data () {
     return {
       message:"Hello",
       newTodoText:'',
       todos: store.fetch(),
       nextTodoId: 4
     }
   },
   watch:{
     todos:function(val){
       console.log(val);
       store.save(val);
     }
   },
   computed:{

   },
   methods: {
     addNewText: function () {
       this.todos.push({
         id: this.nextTodoId++,
         title: this.newTodoText
       })
       this.newTodoText = ''
     }
   }
 }
 </script>

 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 h1, h2 {
   font-weight: normal;
 }

 ul {
   list-style-type: none;
   padding: 0;
 }

 li {
   display: inline-block;
   margin: 0 10px;
 }

 a {
   color: #42b983;
 }
 .active{
   color:red;
 }
 .text-danger{
   color:green;
 }
 </style>

todo_list.js

 const STORAGE_KEY = 'todos-vuejs'

 export default {

   fetch: function() {

     return window.JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]')

   },

   save: function(items) {

     window.localStorage.setItem(STORAGE_KEY, window.JSON.stringify(items))

   }

 }

子组件返回删除按钮

 <template>
     <li>{{title}}
         <button v-on:click="close">X</button>
     </li>
 </template>
 <script>
 export default{
     props:['title'],
     data(){
         return{

         }
     },
     methods:{
         close(){
             this.$emit('remove');
         }
     }
 }
 </script>
 <style>
 </style>

效果

接一篇自己写的

引入jquery和bootstrap查考我vue分类里面的随便，

我这里在页面里面构建了自己的storage全局工具类

 <template>
   <div class="container">
         <form role="form">
             <div class="form-group">
                 <label for="username">用户名:</label>
                 <input type="text" id="username" class="form-control" placeholder="输入用户名" 
　　　　　　　　　　　　v-model.trim="username">
             </div>
             <div class="form-group">
                 <label for="age">年　龄:</label>
                 <input type="text" id="age" class="form-control" placeholder="输入年龄" v-model.trim="age">
             </div>
             <div class="form-group">
                 <input type="button" value="添加" class="btn btn-primary" @click="add()">
                 <input type="button" value="重置" class="btn btn-danger">
             </div>
         </form>
         <hr>
         <table class="table table-bordered table-hover">
             <caption class="h2 text-info">用户信息表</caption>
             <tr class="text-danger">
                 <th class="text-center">序号</th>
                 <th class="text-center">名字</th>
                 <th class="text-center">年龄</th>
                 <th class="text-center">操作</th>
             </tr>
             <tr class="text-center" v-for="(item,index) in myData">
                 <td>{{index}}</td>
                 <td>{{item.name}}</td>
                 <td>{{item.age}}</td>
                 <td>
                     <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer" 
　　　　　　　　　　　　　　@click="nowIndex==index">删除</button>
                 </td>
             </tr>

             <tr v-show="myData.length!=0">
                 <td colspan="4" class="text-right">
                     <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#layer" 
　　　　　　　　　　　　　　　　v-on:click="nowIndex=-2">删除全部</button>
                 </td>
             </tr>
             <tr v-show="myData.length==0">
                 <td colspan="4" class="text-center text-muted">
                     <p>暂无数据....</p>
                 </td>
             </tr>
         </table>

         <!--模态框 弹出框-->
         <div role="dialog" class="modal fade bs-example-modal-sm" id="layer">
             <div class="modal-dialog">
                 <div class="modal-content">
                     <div class="modal-header">
                         <button type="button" class="close" data-dismiss="modal">
                             <span>&times;</span>
                         </button>
                         <h4 class="modal-title">确认删除么?</h4>
                     </div>
                     <div class="modal-body text-right">
                         <button data-dismiss="modal" class="btn btn-primary btn-sm">取消</button>
                         <button data-dismiss="modal" class="btn btn-danger btn-sm" 
　　　　　　　　　　　　　　　　　　@click="deleteMsg(nowIndex)">确认</button>
                     </div>
                 </div>
             </div>
         </div>
     </div>
 </template>

 <script>
 export default {
   name: 'HelloWorld',
   data () {
     return {
       myData:[],
       username:'',
       age:'',
       nowIndex:-100
     }
   },
   created(){
     if(this.$storage.getStorage("myData-list")){
       var index=this.$storage.getStorage("myData-list");
       this.myData=index;
     }
   },
   watch:{
     myData:function(nowVal,oldVal){
       this.$storage.setStorage("myData-list",nowVal);
     }
   },
   methods:{
     add(){
       if(this.username.length==0 || this.age.length==0){
         alert("用户名或年龄不为空");
       }else{
         this.myData.push({
           name:this.username,
           age:this.age
         });
         this.username="";
         this.age=""
       }
     },
     deleteMsg(n){
       if(n==-2){
           this.myData=[];
       }else{
           this.myData.splice(n,1);
       }
     }
   }
 }
 </script>

参考链接：http://www.cnblogs.com/yingzi1028/p/7774954.html