H5 WEB存储实现——登陆时记住用户名或密码

此处用保存用户名为例，因为我们在外登陆时保存用户名居多。

此处需用到localStorage和sessionStorage两种存储方式。

sessionStorage

• 大小 5M

• 生命周期 -- 关闭当前页面就消失

• 活动范围 -- 当前页面

• 存储位置 -- 当前页面的内存中

• API

  • 设置- window.sessionStorage.setItem(k,v) --k是属性名，v是属性值，以下相同。

  • 获取 - window.sessionStorage.getItem(k) 

  • 删除 - window.sessionStorage.removeItem(k)

localStorage

• 大小 - 20M

• 生命周期 - 永久生效除非手动删除

• 活动范围 - 当前浏览器

• 存储位置 - 硬盘

• API

  • 设置- window.localStorage.setItem(k,v) 

  • 获取 - window.localStorage.getItem(k) 

  • 删除 - window.localStorage.removeItem(k) 

  • 清空 - window.localStorage.clear()

了解了这种方式，所以我们应该知道，要记住用户名，应该使用localStorage，以下代码为具体实现。

 window.onload=function(){
        /*页面打开，判断是否存储过用户名---*/
        var uName=window.localStorage.getItem('userName');
        if(uName != null){//说明之前存储过值，说明用户希望记住用户名
            document.getElementById('userName').value=uName;       
        }
        /*点击登录时存储数据*/
        document.getElementById("submit").onclick=function(){
            var name=document.getElementById('userName').value;
            /*判断用户是否选择记住用户名*/
            var isRemenber=document.getElementById('isRemenber');
            if(isRemenber.checked==true){
                /*存储数据到localstorage*/
                window.localStorage.setItem('userName',name);
            }
            else{
                window.localStorage.removeItem('userName');
            }
        }
    }