cookie,sessionstorage,localstorage的区别

1.存储的位置不同
cookie在浏览器与服务器之间来回传递
sessionstorage,localstorage在本地存储
2.存储的大小不同
cookie一般只能存储4K
sessionstorage 和 localstorage 可以存储小于5M
3.数据有效期不同
cookie 可以在设置的过期时间之前一直有效
sessionstorage在浏览器关闭之前有效，localstorage始终有效
4.作用域不同
cookie localstorage 在所有同源窗口共享
sessionstorage 不在不同浏览器兼容，即使同一页面

平常总会遇到在一个网站输入一次用户名之后就被记录下来，这是怎么做的呢？
上面的了解了之后，就可以试着做一做下面的案例啦。
将之命名为《我的名字》

    <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')
            }
        })

在一个输入框内输入名字，刷新之后就可以显示到第二个输入框

非常~人性化。