zoukankan      html  css  js  c++  java
  • 本地缓存

    1、localstorage:永久性的保留,保存是以字符串的形式保存 ,  .removeItem()清除缓存

    2、sessionStorage:一个会话期间的保留,从先打开浏览器过后就会自动清除。

         他们保存的字符串我们可以使用json.parse()来进行解析。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
            <script type="text/javascript" src="js/vue.js"></script>
            
        </head>
        <body>
            <div id="app">
                <div class="nav">
                    <input type="text" v-model="todoInput" placeholder="请你输入你即将要做的事" @keydown="inputText" name="" id="" value=""/>
                </div>
                <div class="todo">
                    <h1>待做的事</h1>
                    <div class="todoItem" v-for="(item,index) in todoList">
                        <span class="content">{{item}}</span>
                        <span class="btn" @click="done($event,index)">完成</span>
                    </div>
                </div>
                
                <div class="done">
                    <h1>已完成的事情</h1>
                    <div class="todoItem" v-for="item in doneList">
                        <span class="content">{{item}}</span>
                        
                    </div>
                </div>
            </div>
            
            <script type="text/javascript">
                var app = new Vue({
                    el:"#app",
                    data:{
                        todoInput:"",
                        todoList:[],
                        doneList:[]
                    },
                    methods:{
                        inputText:function(e){
                            if (e.key=="Enter") {
                                if(this.todoInput){
                                    this.todoList.push(this.todoInput)
                                    localStorage.todoList = JSON.stringify(this.todoList)
                                }
                            }
                        },
                        done:function(e,index){
                            var delItem = this.todoList.splice(index,1)
                            this.doneList.push(delItem[0])
                            localStorage.doneList = JSON.stringify(this.doneList)
                            localStorage.todoList = JSON.stringify(this.todoList)
                        }
                    },
                    mounted:function(){
                        if(localStorage.todoList){
                            this.todoList = JSON.parse(localStorage.todoList)
                            
                        }
                        if(localStorage.doneList){
                            this.doneList = JSON.parse(localStorage.doneList)
                        }
                    }
                })
            </script>
        </body>
    </html>
    

      

  • 相关阅读:
    SQL Server CHARINDEX和PATINDEX详解
    Delphi7控件包详解 (转)
    经历一次人际关系危机总结,改进
    2008年5月份目标和计划
    God bless 贝贝!
    开始新的生活~~~
    一切安好~~~
    Hadoop : “Moving Computation is Cheaper than Moving Data”
    改论文,不轻言放弃,力求准确,简洁
    杜绝拖拖拉拉《明日歌》
  • 原文地址:https://www.cnblogs.com/wwthuanyu/p/9999355.html
Copyright © 2011-2022 走看看