本地缓存

最新推荐文章于 2025-09-05 14:41:09 发布

weixin_33816300

最新推荐文章于 2025-09-05 14:41:09 发布

阅读量65

点赞数

CC 4.0 BY-SA版权

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/wwthuanyu/p/9999355.html

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>

转载于:https://www.cnblogs.com/wwthuanyu/p/9999355.html