0

En la primer carga de la pagina tengo una tabla con todos los libros disponibles junto a un boton agregar a carrito, y un formulario que le permite al usuario hacer una búsqueda de un libro(lo puede buscar por nombre de libro, por autor y por categoría). Al pulsar elbotón agregar a carrito llamo a una función llamada pushData de javascript. Esta función guarda los idLibro en un array de javascript.(funciona perfectamente). El problema esta en que si hago otra búsqueda de un libro, al recargarse la pagina los elementos que tenia en el array se borran. Entonces como puedo evitar que esos elementos que estaban no se borren al recargarse la pagina?

aca el .cshtml

@model List<Librery_MVC.Models.Libro>

<p id="pText">hola</p>

<div class="table-responsive">
    <table class="table table-striped table-primary mt-5 table-bordered" id="myTable">
        <thead>
            <tr>
                <th></th>
                <th>Id</th>
                <th>Nombre</th>
                <th>Autor</th>
                <th>Categoria</th>
                <th>Descripcion</th>
                <th>Precio</th>
                <th>Imagen</th>
            </tr>
        </thead>
        <tbody>

            @if (Model.Count() == 0)
            {
                <tr>
                    <td colspan="6" style="color:red">
                        No Match any document
                    </td>
                </tr>
            }

            else
            {
                foreach (Libro item in Model)
                {

                    autor = sa.getAutor(item.IdAutor);
                    editorial = es.GetEditorial(item.IdEditorial);
                    category = cs.getCategoria(item.IdCategoria);

                <tr>
                    <th>
                        <input type="hidden" name="inputText" id="inputText" value="@item.IdLibro" />
                        @Html.ActionLink("Mostrar", "MostrarLibro", "Usser", new { idLibro = item.IdLibro }, new { @class = "btn btn-info" })
                        <button onclick="pushData();" class="btn btn-info">Agregar a carrito</button>
                    </th>
                    <th>@item.IdLibro</th>
                    <th class="col-md-2">@item.Nombre</th>
                    <th>@autor.Nombre</th>
                    <th>@category.Nombre</th>
                    <th class="col-md-3"><textarea rows="4" cols="40" readonly>@item.Descripcion</textarea></th>
                    <th>@item.Precio</th>
                    <th><img src="/@item.UrlImagen.Replace("\\", "/")" width="80" height="100" /></th>
                </tr>
                }
            }
        </tbody>
    </table>
</div>

y aca la función de javascript

<script type="text/javascript">
    //creo el array
    var myArr = [];

    function pushData(idLibro) {

        myArr.push(idLibro);

        var pval = "";

        for (i = 0; i < myArr.length; i++) {
            pval = pval + myArr[i] + "<br/>";
        }

        //muestro el array
        document.getElementById('pText').innerHTML = pval;
    }
</script>

3 respuestas 3

2

Puedes guardar tu arreglo en el local storage

 window.localStorage.setItem('array', valor);

Y para recuperarlo

window.localStorage.getItem('array')

Se me paso por alto que solo guarda texto el local storage para guardar un array seria algo asi

 <!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <button onclick="pushData()">Agregar</button>
    <p id="pText"></p>

</body>

<script type="text/javascript">
       //creo el array
var json = localStorage.getItem("array");
var myArr = [];

if (json != null) { 
    myArr = JSON.parse(json);
    show(myArr)
}


function pushData(idLibro) {
    idLibro = "hola"; //Dato de ejemplo borrar
    myArr.push(idLibro);
    localStorage.setItem("array", JSON.stringify(myArr));
    show(myArr)
}


function show(array){

    var pval = "";

    for (i = 0; i < array.length; i++) {
        pval = pval + array[i] + "<br/>";
    }

    //muestro el array
    document.getElementById('pText').innerHTML = pval;
}
</script>
</html>
14
  • Gracias @Jorge Luis!, nunca use esto del localStorage, donde tengo que poner lo que decís en mi código?
    – Claudio
    el 21 feb. 2020 a las 18:42
  • Hola aquí puedes encontrar la documentación para manejo de persistencia de datos usando Storage API
    – quevedo
    el 21 feb. 2020 a las 18:48
  • Hola, Después de que llenas tu array, pones window.localStorage.setItem('array', tuarray); y con esto se guarda localmente
    – Jorge Luis
    el 21 feb. 2020 a las 18:48
  • o sea window.localStorage.setItem('array', tuarray); iría adentro de la función de javascript?
    – Claudio
    el 21 feb. 2020 a las 18:49
  • sip, o puedes guardar directamente el valir de pval
    – Jorge Luis
    el 21 feb. 2020 a las 18:53
1

Como ya te comentaron, la mejor forma es guardar tu array en el localStorage, pero para no sobrecargar de variables del almacenamiento local, puedes mejor utilizar el session storage, para cuando se cierre la ventana o cambies de usuario(con programación aparte) puedas refrescar tu variable del almacenamiento de session.

let contenido = [];
sessionStorage.setItem('identificador',contenido);
let recuperar = sessionStorage.getItem('identificador');

Como consejo, por la naturaleza de tu proyecto, te convendría almacenar todos los datos en un array y guardarlo en formato json en el local o session Storage, asi podras tener un identificador por cada cadena json completa de todos tus datos.

Para poder guardar los datos en json primero debes convertirlos a una cadena json con stringify

let array = sessionStorage.getItem('identificador');
let cadenaJson = JSON.stringify(array);

Asi ya la puedes guardar en tu local o session storage, y si necesitas manipular el contenido como objeto lo conviertes a objeto json con JSON.parse.

1
  • Gracias @Jack por el consejo! lo que me pierde es como acoplar tus lineas de código con mi código para que funcione. Por ejemplo tengo que poner parte de tu código en la función de javascript?, si puedes mostrarme como quedaría en mi código me seria de mucha ayuda
    – Claudio
    el 21 feb. 2020 a las 19:09
0

Solucionado! con sessionStorage en la funciónjavaScript

<script type="text/javascript">
    //declaro una varible json para obtener el array "myArr" que guarde en la función pushData
    var json = sessionStorage.getItem("array");
    //creo el array
    var myArr = [];

    if (json != null) {
        myArr = JSON.parse(json);
        show(myArr)
    }


    function pushData(idLibro) {
        myArr.push(idLibro);
        //aca guardo el array "myArr" utilizando sessionStorage
        sessionStorage.setItem("array", JSON.stringify(myArr));
        show(myArr)
    }

//funcion que muestra los elementos que tengo en el array "myArr" en una etiqueta <p>
    function show(array) {

        var pval = "";

        for (i = 0; i < array.length; i++) {
            pval = pval + array[i] + "<br/>";
        }

        //muestro el contenido del array en la etiqueta <p id="pText"></p>
        document.getElementById('pText').innerHTML = pval;
    }
</script>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.