通过案例来展示本地存储

最新推荐文章于 2024-06-02 22:12:52 发布

浮沉随浪逝

最新推荐文章于 2024-06-02 22:12:52 发布

阅读量77

点赞数 1

文章标签：前端 java

本文链接：https://blog.csdn.net/qq_64207331/article/details/126591562

版权

localStorage ：在新标签页中访问原来网址，也可以访问到

sessionStorage:在新标签页中访问原网址，sessionStorage里存储的数据会消失

cookie:在新标签页中打开原网址，cookie会存在


  <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 表单 -->
        <form action="" class="form">
            <h1>用户信息收集</h1>
            姓名: <input type="text" v-model="formData.name"><br>
            年龄: <input type="text" v-model="formData.age"><br>
            <div>
                <button @click.prevent="add">提交</button>
                <button>重置</button>
            </div>
        </form>
        <!-- 表格 -->
        <table border="1" cellspacing="0" width="500px">
            <thead>
                <tr>
                    <td>姓名</td>
                    <td>年龄</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <!-- 循环遍历 -->
                <tr v-for="(item,index) in list" :key="index">
                    <td>{{item.name}}</td>
                    <td>{{item.age}}</td>
                    <td>
                        <button @click="edit(item)">编辑</button>
                        <button @click="del(index)">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

</body>

</html>
<script>
    // 实例化一个Vue
    var vm = new Vue({
        el: "#app",
        data: {
            formData: {
                name: '',
                age: '',
            },
            //  将字符串转成对象或者返回空数组获取本地存储 
            list: JSON.parse(sessionStorage.getItem('add')) || []
        },
        methods: {
            // 点击提交添加到表格里
            add() {
                // 添加到数组
                this.list.push(this.formData)
                // 转换成字符串存在本地存储 
                sessionStorage.setItem('add', JSON.stringify(this.list))
                // 提交之后清空输入框
                this.formData = {
                    name: "",
                    age:"",
                }
            },
            // 删除  传入下标
            del(index) {
                // 数组删除
                this.list.splice(index, 1)
                // 删除之后更新一下
                sessionStorage.setItem('add', JSON.stringify(this.list))

            },
            // 点击编辑数据回显
            edit(item) {
                this.formData = {
                    name: item.name,
                    age: item.age,
                }
            }
        },
    })
</script>
<style>
    .form {
        width: 300px;
        height: 150px;
        margin: auto;
    }

    table {
        text-align: center;
        margin: auto;
    }
</style>