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>

查看全文

相关阅读:
Selenium的使用
 Redis防护建议
 爬虫文件存储-3：Redis
爬虫文件存储-2：MongoDB
爬虫文件存储-1：mysql
爬虫文件存储:txt文档，json文件，csv文件
 Python MongoDB 教程
 使用Robo 3T 软件管理MongoDB数据库如何执行命令行shell
使用Scrapy爬取图书网站信息
 解决Scrapy抓取中文网页保存为json文件时中文不显示而是显示unicode的问题

原文地址：https://www.cnblogs.com/wuzaipei/p/9494442.html