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

  我们在制作登录界面的时候回出现一个勾选框，询问我们是否记住账号和密码，当我们勾选了之后下次进来就是上次登录的账号密码，可以直接登录。那这个功能是如何实现的呢？下面我们就是用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呢？有三种创建方法如下：

if(！window.localStorage){
            alert("浏览器支持localstorage");
            return false;
        }else{
            var storage=window.localStorage;
            //写入a字段
            storage["a"]=1;
            //写入b字段
            storage.b=1;
            //写入c字段
            storage.setItem("c",3);
            console.log(typeof storage["a"]);
            console.log(typeof storage["b"]);
            console.log(typeof storage["c"]);
        }

读取localstorage

if(!window.localStorage){
            alert("浏览器支持localstorage");
        }else{
            var storage=window.localStorage;
            //写入a字段
            storage["a"]=1;
            //写入b字段
            storage.a=1;
            //写入c字段
            storage.setItem("c",3);
            console.log(typeof storage["a"]);
            console.log(typeof storage["b"]);
            console.log(typeof storage["c"]);
            //第一种方法读取
            var a=storage.a;
            console.log(a);
            //第二种方法读取
            var b=storage["b"];
            console.log(b);
            //第三种方法读取
            var c=storage.getItem("c");
            console.log(c);
        }

修改localstorage的值

if(!window.localStorage){
            alert("浏览器支持localstorage");
        }else{
            var storage=window.localStorage;
            //写入a字段
            storage["a"]=1;
            //写入b字段
            storage.b=1;
            //写入c字段
            storage.setItem("c",3);
            console.log(storage.a);
            // console.log(typeof storage["a"]);
            // console.log(typeof storage["b"]);
            // console.log(typeof storage["c"]);
            /*分割线*/
            storage.a=4;
            console.log(storage.a);
        }

localstorage的删除

1、删除所有的内容

var storage=window.localStorage;
            storage.a=1;
            storage.setItem("c",3);
            console.log(storage);
            storage.clear();
            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的键获取

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

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

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

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

if(!window.localStorage){
            alert("浏览器支持localstorage");
        }else{
            var storage=window.localStorage;
            var data={
                name:'xiecanyong',
                sex:'man',
                hobby:'program'
            };
            var d=JSON.stringify(data);
            storage.setItem("data",d);
            console.log(storage.data);
        }

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

var storage=window.localStorage;
            var data={
                name:'xiecanyong',
                sex:'man',
                hobby:'program'
            };
            var d=JSON.stringify(data);
            storage.setItem("data",d);
            //将JSON字符串转换成为JSON对象输出
            var json=storage.getItem("data");
            var jsonObj=JSON.parse(json);
            console.log(typeof jsonObj);

打印出来是Object对象

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

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

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

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

js部分

var user = document.getElementById('user');
		var password = document.getElementById('password');
		var check = document.getElementById('check');
		var btn = document.getElementById('btn');
		// 获取设置的本地存储的用户名的值
		var loUser = localStorage.getItem('user');
		// 获取设置的本地存储的密码的值
		var loPass = localStorage.getItem('pass');
		// 将本地存储的值设置给用户名和密码
		user.value= loUser;
		password.value = loPass;
		// 判断本地存储值不为空的时候将勾选的checked设置为空
		if(loUser!==''&&loPass!==''){
			check.setAttribute('checked','');
		}
		btn.οnclick=function(){
			if(check.checked){
				// alert("选中");
				// 勾选框勾选的时候设置本地的用户名和密码的val为输入的值
				localStorage.setItem('user',user.value);
				localStorage.setItem('pass',password.value);
			}else{
				// alert('未勾选');
				// 勾选框未勾选的时候设置本地的用户名和密码为空
				localStorage.setItem("user","");
            	localStorage.setItem("pass","");
			}
		}