La diferencia entre cookies, almacenamiento de sesiones y almacenamiento local

1. La ubicación de almacenamiento es diferente.
Las cookies se transfieren de un lado a otro entre el navegador y el servidor .
El almacenamiento de sesiones se almacena localmente.
2. El tamaño de almacenamiento es diferente.
Las cookies generalmente solo pueden almacenar 4K.
El almacenamiento de sesiones y el almacenamiento local pueden almacenar menos de 5 M.
3. El período de validez de los datos es diferente.
Las cookies que se pueden configurar en Sessionstorage son válidas hasta el momento de vencimiento.
Sessionstorage es válida hasta que se cierra el navegador. Localstorage siempre es válido.
4. Cookies con diferentes alcances.
Localstorage comparte
el almacenamiento de sesiones en todas las ventanas de el mismo origen No es compatible con diferentes navegadores, ni siquiera en la misma página.

Es común encontrar que después de ingresar un nombre de usuario una vez en un sitio web, este quedará registrado ¿Cómo hacer esto?
Después de comprender lo anterior, puede probar el siguiente caso.
Nómbrelo "Mi nombre"

    <button>点击</button>
    <input type="text" class="ipt">
    <input type="text" id="username"><input type="checkbox" name="" id="remember">我的名字
        var username=document.querySelector('#username');
        var remember=document.querySelector('#remember');
        var btn=document.querySelector('button');
        var ipt=document.querySelector('.ipt');
        btn.addEventListener('click',function(){
    
    
            var val=ipt.value;
            localStorage.setItem('username',val);
        })
        if(localStorage.getItem('username')){
    
    
            username.value = localStorage.getItem('username');
            remember.checked=true;
        }
        remember.addEventListener('change',function(){
    
    
            if(this.checked){
    
    
                localStorage.setItem('username',username.value)
            }else{
    
    
                localStorage.removeItem('username')
            }
        })

Ingrese su nombre en un cuadro de entrada y, después de actualizarlo, se mostrará en el segundo cuadro de entrada. Es
Insertar descripción de la imagen aquí
muy fácil de usar.

Supongo que te gusta

Origin blog.csdn.net/qq_48439911/article/details/124534915
Recomendado
Clasificación