Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » HTML » utilizando SessionStorage

HTML - utilizando SessionStorage

Volver
Nuevo Tema
<<>>
 
Vista:

utilizando SessionStorage

Publicado por Victor (4 intervenciones) el 03/05/2018 11:14:38
Buenos dias.
Tengo que hacer lo siguiente:
"Crear una caja de texto, a modo de editor de contenidos, y utilizando SessionStorage almacenar el contenido de la caja en cada pulsación de tecla. Si la página es recargada, el último contenido almacenado debe mostrarse en la caja de texto. Comprobad que cerrando la pestaña actual, o abriendo una nueva ventana, los datos no se comparten. "
Y esto es lo que tengo hecho
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<!--

To change this license header, choose License Headers in Project Properties.

To change this template file, choose Tools | Templates

and open the template in the editor.

-->
<html>
    <head>
        <title>Funcionalidades SessionStorage y LocalStorage</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script>
            //Funcion que almacena el contenido de de la caja de testo en cada pulsacion;
            sessionStorage.setItem('ValorEntrada','LArry');
            function almacenaEntrada(entrada)
            {
                var entrada= entrada || sessionStorage.getItem();
                if(entrada===null)
                {
                }else{
                    valorActual+= entrada;
                }
                sessionStorage.getItem('ValorEntrada')+entrada;
                alert(sessionStorage.getItem(ValorEntrada))
            }
 
        </script>
    </head>
    <body>
        <div>SessionStorage</div>
        <textarea id=entrada onchange="almacenaEntrada(this.value)">  </textarea>
 
    </body>
</html>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de santi
Val: 88
Ha aumentado 1 puesto en HTML (en relación al último mes)
Gráfica de HTML

utilizando SessionStorage

Publicado por santi (31 intervenciones) el 04/05/2018 01:07:41
Hola,

no se si es un error pero veo cosas que no están bien como el "id" del textarea que no está bien cerrado...

de todas formas, ¿has probado de hacer un console.log(localStorage.getItem("ValorEntrada")) a ver que muestra en la consola?

Igual me equivoco pero para guardar un valor de un area de texto debes hacerlo mediante "onkeyup" y no "onchange" pero ya te digo, igual no es correcto..

Prueba y comenta ;)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar

utilizando SessionStorage

Publicado por Victor (4 intervenciones) el 05/05/2018 11:13:38
Buenos dias.
Acabo de probarlo y llevas razon es con el evento keyUp.

Pero no consigo que almacene el valor y mucho menos que se muestre en otra pestaña.
Por el momento el codigo está así:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<!--

To change this license header, choose License Headers in Project Properties.

To change this template file, choose Tools | Templates

and open the template in the editor.

-->
<html>
    <head>
        <title>Funcionalidades SessionStorage y LocalStorage</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script>
            //Funcion que almacena el contenido de de la caja de testo en cada pulsacion;
            sessionStorage.setItem('ValorEntrada','');
            function almacenaEntrada(entrada)
            {
                var entrada= entrada || sessionStorage.getItem(ValorEntrada);
                alert("Entrada vale=>"+entrada);
                if(entrada===null)
                {
                    sessionStorage.setItem(UserEntrada);
                }else{
                    sessionStorage.setItem(entrada+sessionStorage.getItem(ValorEntrada));
                }
                sessionStorage.setItem('ValorEntrada'+entrada);
 
            }
 
            function poblarTextArea(){
                            document.getElementById("entrada").value=sessionStorage.getItem(ValorEntrada);
            }
 
        </script>
    </head>
    <body onload="poblarTextArea()">
        <div>SessionStorage</div>
        <textarea  id="entrada" onkeyup="almacenaEntrada(this.value)" >  </textarea>
 
    </body>
</html>

Alguna sugerencia?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Pedro
Val: 277
Bronce
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

utilizando SessionStorage

Publicado por Pedro (74 intervenciones) el 05/05/2018 14:19:45
Mira te he codeado esto a ver si es lo que necesitas.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
 
<html>
    <head>
        <title>Solución rPeter para LWP</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
    </head>
    <body>
        <div>SessionStorage</div>
        <textarea  id="entrada" >  </textarea>
 
    </body>
        <script>
 
            //<!--Creo un Listener para el evento keyup en el elemento entrada-->
             document.getElementById('entrada').addEventListener('keyup',almacenaEntrada,false);
            //<!--Creo un Listener para el evento recargar window ó abrir un nuevo _blank page-->
             window.addEventListener('beforeunload',cleansession,false);
 
             //<!--Función para eliminar la sessión localStorage en el evento beforeunload -->
             function cleansession()
             {
             localStorage.rpeter=null;
             }
            /*<!--Función que crea la sesión localStorage rpeter  cogiendo los valores del id="entrada"

              si no es null la variable localStorage rpeter entonces imprimirá en el área de texto 

            -->*/
            function almacenaEntrada()
            {
             if(localStorage.rpeter!=null)
             {
 
              var xve=d.getElementById('entrada').value;
 
              localStorage.rpeter=xve;
              d.getElementById('entrada').value=localStorage.rpeter;
             }
 
 
             }
 
           </script>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

utilizando SessionStorage

Publicado por Victor (4 intervenciones) el 06/05/2018 10:17:49
Buenos dias.

Muchas gracias por atenderme de antemano.
El tema es que no consigo que aparezcan los datos en la pestaña nueva.
La idea es que introduzca texto,se valla guardando y cuando abra una nueva pestaña el texto introducido en la atenrior aparezca.
Este es el enunciado del ejercicio,tiene dos partes:

Crear una caja de texto, a modo de editor de contenidos, y utilizando SessionStorage almacenar el contenido de la caja en cada pulsación de tecla. Si la página es recargada, el último contenido almacenado debe mostrarse en la caja de texto. Comprobad que cerrando la pestaña actual, o abriendo una nueva ventana, los datos no se comparten.
Este es el codigo actual de esta parte:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<html>
    <head>
        <title>Funcionalidades SessionStorage y LocalStorage</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script>
            //Funcion que almacena el contenido de de la caja de testo en cada pulsacion;
            sessionStorage.setItem('ValorEntrada','');
            function almacenaEntrada(entrada)
            {
                var entrada= entrada || sessionStorage.getItem('ValorEntrada');
                alert("Entrada vale=>"+entrada);
                if(entrada===null)
                {
                    sessionStorage.setItem(UserEntrada);
                }else{
                    sessionStorage.setItem('ValorEntrada',entrada+sessionStorage.getItem('ValorEntrada'));
                }
                //sessionStorage.setItem('ValorEntrada'+entrada);
                alert("SessionStoreVale=>"+sessionStorage.getItem('ValorEntrada'));
            }
        </script>
    </head>
    <body>
        <div>SessionStorage</div>
        <textarea  id="entrada" onkeyup="almacenaEntrada(this.value)" >  </textarea>
    </body>
 
</html>
Si guarda los valores pero al recargar la pagina no los conserva.

Y la otra parte es esta:
Modificar el código anterior para utilizar LocalStorage. Comprobad que en este caso, aunque cierre la ventana o abra una nueva, los datos se mantienen. Añadir la posibilidad de actualizar el resto de ventanas abiertas, cada vez que se modifique el valor de la caja de texto en cualquiera de ellas.
Usando tu solucion,que te agradezco de antemano.No se matienen los datos al abrir una nueva pesataña.
El codigo actual es este:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<html>
    <head>
        <title>Solcuion RPeter</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div>SessionStore</div>
        <textarea id="entrada"></textarea>
    </body>
    <script>
        //<!--Creacion de Listener para el evento keyUp de la-->
        document.getElementById('entrada').addEventListener('keyup',almacenaEntrada,false);
 
        //<!--Creacion de listener para el evento recargar windows o abrir una nueva blank page-->
        document.addEventListener('beforeunload',cleansession,false);
 
        //<!--Funcion para eliminar la session localStore en el evento beforeunload-->
        function cleansession() {
            sessionStorage.rpeter=null;
 
        }
 
 
         <!--Funcion que crea la sesion localStore rpeter congiendo los valores del id="entrada"-->
         <!--Si no es null la variable LocalStore rpeter entonces imprirá en el area de texto-->
 
        function almacenaEntrada(){
            if(localStorage.rpeter!==null){
                var xve=document.getElementById('entrada').value;
                localStorage.rpeter=xve;
                document.getElementById('entrada').value=localStorage.rpeter;
            }
        }
    </script>
 
</html>

Ves algun fallo?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar