为什么 sessionStorage 清除后仍然存在-解网

问：

为了便于可视化，在我的代码的这个简化版本中，我遇到了以下疑问：

我在输入中写了一些东西，然后单击调用“resetForm”函数的“清除表单”。
除了清除输入外，它还清除了存储“自动保存”功能实时保存的数据的 sessionStorage。但是，无需重新加载页面;
当我更改选择中的选项时，输入中删除的值会重新出现。
当我在“roleOptions”中检查会话时，即使在它导致“resetForm”中出现 null 之后，它也会再次存在。

我想知道为什么会这样。我尝试使用 sessionStorage.removeItem（“fields_entity”）删除特定会话，但它也不起作用。事实上，我设法使代码正常工作，但我想了解在这种情况下发生的行为。

在整个代码下方：

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

<head>
    <title>Document</title>
</head>

<body>
    <form class="form user">
        <label for="role">Choose your role</label>
        <select id="role" name="role">
            <option value="teacher" name="teacher">Teacher</option>
            <option value="student" name="student">Student</option>
            <option value="adm" name="adm">Collaborator</option>
        </select>

        <label for="name">Name:</label>
        <input type="text" id="name" name="name">

        <button type="button" onclick="resetForm();"> Clear formulary</button>
    </form>
    <script>
        function autosave(form, id) {
            let fields = sessionStorage.getItem(`fields_${id}`);

            fields ? (fields = JSON.parse(fields)) : (fields = {});


            Array.from(form.elements).forEach(input => {
                if (input.tagName === "INPUT" || input.tagName === "SELECT") {
                    input.addEventListener("input", () => {
                        fields[input.name] = input.value;
                        sessionStorage.setItem(`fields_${id}`, JSON.stringify(fields));
                    });
                }
            });

            Object.keys(fields).forEach(key => {
                const input = document.querySelector(`input[name="${key}"], select[name="${key}"]`);

                if (input) {
                    input.value = fields[key];
                }
            });

        }
        const form = document.querySelector(".form.user");
        const role = document.querySelector("#role");

        function roleOptions() {
            console.log(sessionStorage.getItem("fields_entity")) // session still existing
            autosave(form, "entity");
            let roleValue = role.value;
            switch (roleValue) {
                case "student":
                    studentFormulary();
                    break;
                case "teacher":
                    teacherFormulary();
                    break;
                case "adm":
                    admFormulary();
                    break;
                default:
                    studentFormulary();
                    break;
            }
        };
        
        role.addEventListener("change", roleOptions);  

        function resetForm() {

            form.querySelectorAll("input").forEach(e => { e.value = ""; });
            sessionStorage.clear(); 
            console.log(sessionStorage.getItem("fields_entity")) // null
        }
            
        function studentFormulary() {
           

        }
        function teacherFormulary() {
          
        }
        function admFormulary() {
            
        }
        roleOptions();

    </script>
</body>

</html>

自动保存函数采用表单和 id 作为参数，其中 id 对应于将创建以实时存储数据的会话的名称。表单的所有输入和选择元素都添加了输入事件，该事件将值存储在字段数组中。如果具有该名称的会话不存在，则此数组将为空，如果存在，则它将是一个具有先前保存值的对象数组。

function autosave(form, id) {
            let fields = sessionStorage.getItem(`fields_${id}`);

            fields ? (fields = JSON.parse(fields)) : (fields = {});


            Array.from(form.elements).forEach(input => {
                if (input.tagName === "INPUT" || input.tagName === "SELECT") {
                    input.addEventListener("input", () => {
                        fields[input.name] = input.value;
                        sessionStorage.setItem(`fields_${id}`, JSON.stringify(fields));
                    });
                }
            });

            Object.keys(fields).forEach(key => {
                const input = document.querySelector(`input[name="${key}"], select[name="${key}"]`);

                if (input) {
                    input.value = fields[key];
                }
            });

        }

JavaScript 函数输入事件处理动态表单

答： 暂无答案

上一个：有没有办法循环遍历代码中的所有玩具以容纳更多玩具？

下一个：将具有多个输入参数的函数应用于矢量

为什么 sessionStorage 清除后仍然存在

Why sessionStorage stills existing after clear it

评论