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

热门工具换一换