H5新特性 - 本地存储

本地存储

注意：
本地存储调用者必须统一，用临时存储存储的数据，只有临时存储才能找到

localStorage

永久存储（相对），其中的数据不随着浏览器的开关而改变

sessionStorage

临时存储（相对），当浏览器关闭/当前页面关闭时，数据消失,页面刷新时不会影响

两者区别

local 和 session的区别：

• local这里做永久存储，浏览器关闭与否并不影响它。多数使用在用户自动登录； 客户端保存数据方面
• session做临时存储，浏览器或页面关闭时，数据自动删除，不再存储。多用于安全性使用较高的地方。
  例如: 登录后，本网站内 页面跳转无需再次登录。当退出整个网站，再次进入，仍需登录

判断是否支持

	if (typeof(Storage) !=="undefined") {
		alert("是的，支持本地存储！")
	}else{
		alert("抱歉，不支持web存储！")
	}
	

保存数据

	btn[0].onclick = function(){
		//setItem(): 将数据以键值对的方式，存储
		//			谁调用，存给谁
		
		// sessionStorage.setItem("key",ipt.value);
		localStorage.setItem("txt",ipt2.value);
	}

获取数据

	btn[1].onclick = function(){
		//getItem(): 获取
		//根据key键获取value值
		console.log(localStorage.getItem("text"));
		for (var i = 0 ; i < localStorage.length ; i++) {
			console.log(localStorage.key(i))
		}
		
		//  多个数据时，提供的思路如下
		// var b = JSON.parse(sessionStorage.getItem("text"));
        //遍历 forin
        //将in 后面 的属性  逐个取出  存到 in前面的变量中
        //for(变量 in 对象){}
        // for(var k in b){
        // 		console.log(k);
        //  	console.log(b[k]);
       //  }
	}

删除数据

	btn[2].onclick = function(){
		//根据Key键，删除对应的键值对
		localStorage.removeItem("text");
	}