h5新特性localstorage的简单应用（记住登录名和密码）

h5新特性localstorage的简单应用（记住登录名和密码）

2017年09月08日 10:12:10

阅读数：960

  我们在制作登录界面的时候回出现一个勾选框，询问我们是否记住账号和密码，当我们勾选了之后下次进来就是上次登录的账号密码，可以直接登录。那这个功能是如何实现的呢？下面我们就是用h5的新特性localstorage来实现。

 首先，我们需要了解下localstorage的含义和用法。在客户端h5提供了两种存储方式；一种是localstorage，一种是sessionstorage

        下面我们详细介绍下这两种方式的优缺点。

localstorage的有点：1、拓展了cookie的4k限制2、可以将第一次接收的数据存储到本地，这个相当于5M大小的前端页面数据库，但是只能在高版本的浏览器中使用。

localstorage的局限性：1、浏览器版本不统一，localstorage只支持ie8及以上的版本2、目前浏览器只能讲localstorage的数据类型限定为strinf，对于我们现在用的JSON格式需要进行转换。3、在浏览器的隐私模式下是不可读的4、本质上是对字符串的读取，如果数量太多会造成页面的卡的情况5、不能被爬虫抓取到

localstorage与sessionstorage的本质区别是localstorage是永久存储而sessionstorage是回话存储（页面关闭数据消失）

那如何创建localstorage呢？有三种创建方法如下：

[html]  view plain  copy

1. if(！window.localStorage){  
2.             alert("浏览器支持localstorage");  
3.             return false;  
4.         }else{  
5.             var storage=window.localStorage;  
6.             //写入a字段  
7.             storage["a"]=1;  
8.             //写入b字段  
9.             storage.b=1;  
10.             //写入c字段  
11.             storage.setItem("c",3);  
12.             console.log(typeof storage["a"]);  
13.             console.log(typeof storage["b"]);  
14.             console.log(typeof storage["c"]);  
15.         }  

读取localstorage

[html]  view plain  copy

1. if(!window.localStorage){  
2.             alert("浏览器支持localstorage");  
3.         }else{  
4.             var storage=window.localStorage;  
5.             //写入a字段  
6.             storage["a"]=1;  
7.             //写入b字段  
8.             storage.a=1;  
9.             //写入c字段  
10.             storage.setItem("c",3);  
11.             console.log(typeof storage["a"]);  
12.             console.log(typeof storage["b"]);  
13.             console.log(typeof storage["c"]);  
14.             //第一种方法读取  
15.             var a=storage.a;  
16.             console.log(a);  
17.             //第二种方法读取  
18.             var b=storage["b"];  
19.             console.log(b);  
20.             //第三种方法读取  
21.             var c=storage.getItem("c");  
22.             console.log(c);  
23.         }  

修改localstorage的值

[html]  view plain  copy

1. if(!window.localStorage){  
2.             alert("浏览器支持localstorage");  
3.         }else{  
4.             var storage=window.localStorage;  
5.             //写入a字段  
6.             storage["a"]=1;  
7.             //写入b字段  
8.             storage.b=1;  
9.             //写入c字段  
10.             storage.setItem("c",3);  
11.             console.log(storage.a);  
12.             // console.log(typeof storage["a"]);  
13.             // console.log(typeof storage["b"]);  
14.             // console.log(typeof storage["c"]);  
15.             /*分割线*/  
16.             storage.a=4;  
17.             console.log(storage.a);  
18.         }  

localstorage的删除

1、删除所有的内容

[html]  view plain  copy

1. var storage=window.localStorage;  
2.             storage.a=1;  
3.             storage.setItem("c",3);  
4.             console.log(storage);  
5.             storage.clear();  
6.             console.log(storage);  

2、删除某个键值对

var storage=window.localStorage;
            storage.a=1;
            storage.setItem("c",3);
            console.log(storage);
            storage.removeItem("a");
            console.log(storage.a);

localStorage的键获取

[html]  view plain  copy

1. var storage=window.localStorage;  
2.             storage.a=1;  
3.             storage.setItem("c",3);  
4.             for(var i=0;i<storage.length;i++){  
5.                 var key=storage.key(i);  
6.                 console.log(key);  
7.             }  

使用key()方法，向其中出入索引即可获取对应的键
JSON和字符串的转换

一般我们会将JSON存入localStorage中，但是在localStorage会自动将localStorage转换成为字符串形式

这个时候我们可以使用JSON.stringify()这个方法，来将JSON转换成为JSON字符串

[html]  view plain  copy

1. if(!window.localStorage){  
2.             alert("浏览器支持localstorage");  
3.         }else{  
4.             var storage=window.localStorage;  
5.             var data={  
6.                 name:'xiecanyong',  
7.                 sex:'man',  
8.                 hobby:'program'  
9.             };  
10.             var d=JSON.stringify(data);  
11.             storage.setItem("data",d);  
12.             console.log(storage.data);  
13.         }  

读取之后要将JSON字符串转换成为JSON对象，使用JSON.parse()方法

[html]  view plain  copy

1. var storage=window.localStorage;  
2.             var data={  
3.                 name:'xiecanyong',  
4.                 sex:'man',  
5.                 hobby:'program'  
6.             };  
7.             var d=JSON.stringify(data);  
8.             storage.setItem("data",d);  
9.             //将JSON字符串转换成为JSON对象输出  
10.             var json=storage.getItem("data");  
11.             var jsonObj=JSON.parse(json);  
12.             console.log(typeof jsonObj);  

打印出来是Object对象

另外还有一点要注意的是，其他类型读取出来也要进行转换

下面我们就实际应用一下h5的新特性，用来存储登录界面的用户名和密码。代码如下可以复制之后测试下效果，验证的时候是要刷新页面的。

html部分，简单写一个登录样式

[html]  view plain  copy

1. 用户名:  <input type="text" id="user"><br>  
2.     密码:    <input type="password" style="margin-left:15px" id="password"><br>  
3.     <input type="checkbox" style="margin-left:55px" id="check">是否记住密码<br>  
4.     <button id="btn" style="margin-left:75px">登录</button>  

js部分

[html]  view plain  copy

1. var user = document.getElementById('user');  
2.         var password = document.getElementById('password');  
3.         var check = document.getElementById('check');  
4.         var btn = document.getElementById('btn');  
5.         // 获取设置的本地存储的用户名的值  
6.         var loUser = localStorage.getItem('user');  
7.         // 获取设置的本地存储的密码的值  
8.         var loPass = localStorage.getItem('pass');  
9.         // 将本地存储的值设置给用户名和密码  
10.         user.value= loUser;  
11.         password.value = loPass;  
12.         // 判断本地存储值不为空的时候将勾选的checked设置为空  
13.         if(loUser!==''&&loPass!==''){  
14.             check.setAttribute('checked','');  
15.         }  
16.         btn.onclick=function(){  
17.             if(check.checked){  
18.                 // alert("选中");  
19.                 // 勾选框勾选的时候设置本地的用户名和密码的val为输入的值  
20.                 localStorage.setItem('user',user.value);  
21.                 localStorage.setItem('pass',password.value);  
22.             }else{  
23.                 // alert('未勾选');  
24.                 // 勾选框未勾选的时候设置本地的用户名和密码为空  
25.                 localStorage.setItem("user","");  
26.                 localStorage.setItem("pass","");  
27.             }  
28.         }