jquery 在sessionStorage中保存数据以在重新加载页面后显示div

inn6fuwd  于 2023-08-04  发布在  jQuery
关注(0)|答案(2)|浏览(92)

我有一组div,我显示后,我点击一个选项从选择。数据选项在重新加载后保存,以保持选项处于选中状态。这是正确的,但问题是onreload,我想保存值div来显示它,但我不知道如何做到这一点:看:
这是我的div组:

<center>
    <div>
        <div class="opc" id="cerDiv" style="display:none;">
            <div class="divTag" style="width: 350px;">
                <p>
                    <span class="spanrojo">|</span>
                    <span class="spangris">Certificaciones</span>
                    <span class="spanrojo">|</span>
                </p>
                <form method="post" onsubmit="return captchaValidar(this)" action="@Url.Action("Pdf", "Home")">
                    <label for="solicitud">Solicitud: </label>
                    <input type="text" id="solicitud" minlength="5" maxlength="7" name="solicitud" placeholder="Ingrese la solicitud..." required
                           title="Sólo letras y números. Cantidad mínima de caracteres: 5. Cantidad máxima de caracteres: 7"
                           onkeypress="return validarCertificadosYSolicitudes(event)" autofocus>
                    <input class="buscar" type="submit" id="btn" value="Buscar" />

                    @if (ViewBag.Alert != null)
                    {
                        <div class="alert">
                            <span class="closebtn">&times;</span>
                            <strong>Providus informa: </strong>
                            <p>@ViewBag.Alert</p>
                        </div>
                    }
                </form>
            </div>
        </div>

        <div class="opc" id="cuoDiv" style="display:none;" >
            <div style="width: 350px; ">
                <p>
                    <span class="spanrojo">|</span>
                    <span class="spangris">Cuotas</span>
                    <span class="spanrojo">|</span>
                </p>
            </div>
            <div class="divTag" style="width: 350px;">
                <form id="frmCU" method="post" action="@Url.Action("DetalleCuota", "Cuotas")">
                    <label for="titulo">Título: </label>
                    <input type="number" id="titulo" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" name="titulo" maxlength="6" placeholder="Ingrese su título..." required
                           title="Sólo letras y números. Cantidad mínima de caracteres: 4. Cantidad máxima de caracteres: 5"
                           onkeypress="return cuotasYTitulos(event)" autofocus>
                    <input class="buscar" type="submit" id="btn" value="Buscar" />
                    @if (ViewBag.Alert != null)
                    {
                        <div class="alert">
                            <span class="closebtn">&times;</span>
                            <strong>Providus informa: </strong>
                            <p id="textoAlerta">@ViewBag.Alert</p>
                        </div>
                    }
                </form>
            </div>
        </div>
    </div>
</center>

字符串
这是我的选择:

<select id="sort-item" class="term">
                <option data-sort="0">Elija una opción</option>
                @foreach (var nivel in Model)
                {
                    if (nivel.nivel == 0 || nivel.nivel == 1 || nivel.nivel == 2 || nivel.nivel == 7)
                    {
                        <option value="cerDiv" data-sort="1">Certificados</option>
                        <option value="cuoDiv" data-sort="2">Cuotas</option>
                    } 
                }
            </select>


我的js文件中有一个this:

let selItems = JSON.parse(sessionStorage.getItem("SelItem")) || [];
var div_status = JSON.parse(sessionStorage.getItem("div_status")) || [];

$(function () {
    if (selItems) {
        selItems.forEach(obj => {
            const [k, v] = Object.entries(obj)[0]
            $("#" + k).val(v)
        })
    }
    $('.term').on("change", function () {
        selItems = $('.term').map(function () {
            return {
                [this.id]: this.value
            }
        }).get();
        console.log(selItems)
        sessionStorage.setItem("SelItem", JSON.stringify(selItems));
        saveDiv(this.value);
    });
});

function saveDiv(div) {
    div_status[div] = true;
    sessionStorage.setItem("div_status", JSON.stringify(div_status));
}

window.onload = function () {
    console.log(div_status);
    Object.values(div_status).forEach(function (div) {
        monstrarDiv(document.querySelector("#" + div))
    });
}

function mostrarDiv(target) {
    var opciones = document.getElementsByClassName('opc');
    var tagt = document.getElementById(target);
    var esVisible = tagt.style.display == 'block';

    //hide all
    for (var i = 0; i < opciones.length; i++) {
        opciones[i].style.display = 'none';
    }

    //toggle actual
    tagt.style.display = esVisible ? 'none' : 'block';

    return false;
}


我尝试更改代码,但没有任何工作,因为我不知道如何调用值来显示div。

zbwhf8kr

zbwhf8kr1#

我在回答你最初的问题,就像编辑之前一样。selItems是一个数组,您的问题是这里所示的问题:https://jsfiddle.net/ax48kwpf/1/
(不能在这里创建一个片段,因为stackoverflow出于安全原因不允许我与sessionStorage交互)。

let myArray = [1, 2, 3, 4];

sessionStorage.setItem("myArray", myArray);

console.log(sessionStorage.getItem("myArray"));

字符串


的数据
正如我们所看到的,我有一个很好的数组,它已经被转换成一个字符串。所以,我需要将String解码为数组。但是我怎么知道它是一个数组,我怎么确保每个数组都能被很好地处理呢?答案很简单我使用一种受控的通用方法将变量转换为字符串:

let myArray = [1, 2, 3, 4];

sessionStorage.setItem("myArray", JSON.stringify(myArray));

console.log(JSON.parse(sessionStorage.getItem("myArray")));


https://jsfiddle.net/ax48kwpf/2/



我们可以看到它成功地转换回了数组。因此,我通过JSON.stringify()将变量转换为String,并通过JSON.parse()将其转换回来,当然,总是传递适当的参数。

5uzkadbs

5uzkadbs2#

您需要通过保存该值的相同键来恢复该值。

var data = sessionStorage.getItem("SelItem");

// usually this value would be JSON
var SelItem = JSON.parse(data)

// do something with SelItem
console.log(SelItem)

字符串
编辑:
因此,为了保存一些div id的可见性状态,可以在sessionStorage中存储一个数组或对象。

// an object is preferable for easy access to keys
var div_status = JSON.parse(sessionStorage.getItem("div_status")) || {};

// onload
Object.values(div_status).forEach(function(div) {
  monstrarDiv(document.querySelector("#" + div))
})

// on term change:
function saveDiv(div) {
  div_status[div] = true
  sessionStorage.setItem("div_status", JSON.stringify(div_status));
}

function removeDiv(div) {
  delete div_status[div]
  sessionStorage.setItem("div_status", JSON.stringify(div_status));
}

相关问题