html5数据存储

Html数据存储

在html4及以前的html版本,本地数据的存储使用的是 cookie，在html5之后增加了更加安全与快速的Web 存储方式。Web存储的数据不会被保存在服务器上，可以存储大量的数据，而不影响网站的性能。数据以键/值对存在, 只允许该网页访问使用。

1. 本地存储

html5新增加的存储方式。本地存储注意包含两种：localStorage和sessionStorage

localStorage:

永久存储，不会过期，可以手动添加／删除。

保存数据：localStorage.setItem(key,value);  或者  localStorage.key = value;    //key替代为你需要存储的key ，如localStorage.name ＝ “chyss”；

读取数据：localStorage.getItem(key);  或者  localStorage.key;                          //key替代为你需要存储的key ，如localStorage.name

删除数据： localStorage.removeItem(key);

删除全部：localStorage.clear();

获取key：localStorage.key(i);  // i 为索引

遍历localStorage中的全部数据：

for (var i = 0; i < localStorage.length; i++) 
{
	console.log(localStorage.key(i)+" : "+localStorage.getItem(localStorage.key(i)));
}

sessionStorage：

对一个 session 进行数据存储，当用户关闭浏览器窗口后，数据会被删除。数据的操作和localStorage一样。

判断浏览器是否支持Web存储，typeof(Storage) 返回当前的web存储方式。

if(typeof(Storage) !== "undefined")
{
	//支持web存储
}
else
{
	//不支持web存储
}

2.cookie数据存储

在html5之前的主要数据存储方式。

1）cookie是与浏览器相关的，访问同一个页面，不同浏览器之间所保存的cookie不能互相访问。
2）cookie安全性不够高，所有的cookie都是以纯文本的形式记录于文件中，因此在保存用户名密码等信息时，最好事先经过加密处理。

3）可以设置有效时间。

保存cookie：

//second 以秒为单位
function setCookie(name,value,second){
	if(second != null){
		var exp = new Date();
		exp.setTime(exp.getTime()+second*1000)
		document.cookie = name + "=" +escape(value)+ ";expires="+exp.toGMTString();
	}
	else{
		document.cookie = name + "=" +escape(value);
	}
}

读取cookie：

function getCookie(name){
    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)"); //正则匹配
    if(arr=document.cookie.match(reg)){
      return unescape(arr[2]);
    }
    else{
     return null;
    }
}

删除cookie：

function delCookie(name){
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval=getCookie(name);
    if(cval!=null){
      document.cookie= name + "="+cval+";expires="+exp.toGMTString();
    }
}