localStroage本地存储

最新推荐文章于 2024-08-15 20:33:20 发布
丶久友
最新推荐文章于 2024-08-15 20:33:20 发布
阅读量299
点赞数
分类专栏：个人笔记
个人笔记专栏收录该内容
5 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02-Vue的常用指令-综合练习</title>
    <style>
        #app {
            margin: 50px auto;
            width: 600px;
        }

        fieldset {
            border: 1px solid orangered;
            margin-bottom: 20px;
        }

        fieldset input {
            width: 200px;
            height: 30px;
            margin: 10px 0;
        }

        table {
            width: 600px;
            border: 2px solid orangered;
            text-align: center;
        }

        thead {
            background-color: orangered;
        }
    </style>
</head>
<body>
<div id="app">
    <!--第一部分-->
    <fieldset>
        <legend>嚯嚯嚯(itlike.com)学生录入系统</legend>
        <div>
            <span>姓名:</span>
            <input type="text" placeholder="请输入姓名" v-model="newStudent.name">
        </div>
        <div>
            <span>年龄:</span>
            <input type="text" placeholder="请输入年龄" v-model="newStudent.age">
        </div>
        <div>
            <span>性别:</span>
            <select v-model="newStudent.sex">
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
        </div>
        <div>
            <span>手机:</span>
            <input type="text" placeholder="请输入手机号码" v-model="newStudent.phone">
        </div>
        <button @click="createNewStu()">创建新用户</button>
    </fieldset>
    <!--第二部分-->
    <table>
        <thead>
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
            <td>手机</td>
            <td>删除</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(stu, index) in students" :key="index">
            <td>{{stu.name}}</td>
            <td>{{stu.sex}}</td>
            <td>{{stu.age}}</td>
            <td>{{stu.phone}}</td>
            <td>
                <button @click="delStudent(stu.id)">删除</button>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<script src="lib/vue.js"></script>
<script src="lib/vue-resource.js"></script>
<script>
    new Vue({
        el: '#app',
        mounted(){
           this.getStudentList();
        },
        data: {
            students: [],
            newStudent: {name: '', sex: '男', age: 0, phone: ''}
        },
        methods: {
            // 获取学生列表
            getStudentList(){
                //读取losclStorage里的缓存数据
                //因为里面存的是字符串，所一要转成JSON格式  JSON.parse
               this.students =JSON.parse( window.localStorage.getItem('students') || '[]');
                // console.log(this.students);
                
            },
            // 插入记录
            createNewStu(){
                // 1. 姓名不能为空
                if(this.newStudent.name === ''){
                    alert('姓名不能为空!');
                    return;
                }

                // 2. 验证年龄
                if(this.newStudent.age <= 0){
                    alert('请输入正确的年龄!');
                    return;
                }

                // 3. 验证手机
                if(this.newStudent.phone === ''){
                    alert('请输入正确的手机号码!');
                    return;
                }

                // 4. 插入新纪录
                 this.students.unshift(this.newStudent);
                //  往localSorage里面存入插入的数据
                // 但是要把对象转成字符串的格式
                localStorage.setItem('students',JSON.stringify(this.students));
                

                // 5. 清空数据
                this.newStudent = {name: '', sex: '男', age: 0, phone: ''}
            },
            // 删除记录
            delStudent(index){
                //    页面上删除数据
                this.students.splice(index, 1);
                 // 往localStorage里删除数据
                localStorage.setItem('students', JSON.stringify(this.students));
                
            }
        }
    });
</script>
</body>
</html>