html5本地存储

在html5之前，我们经常会用到的就是cookie，可以记录数据信息，Cookie是由服务器端生成，发送给User-Agent（一般是浏览器），浏览器会将Cookie的key/value保存到某个目录下的文本文件内，下次请求同一网站时就发送该Cookie给服务器（前提是浏览器设置为启用cookie）。Cookie名称和值可以由服务器端开发自己定义，对于JSP而言也可以直接写入jsessionid，这样服务器可以知道该用户是否合法用户以及是否需要重新登录等，服务器可以设置或读取Cookies中包含信息，借此维护用户跟服务器会话中的状态。

运用jquery cookie插件，我们只需几行代码便可以方便的进行cookie的存储，读取及删除等操作。具体见使用jQuery操作Cookies的实现代码。通过cookie，我们可以记录用户登陆状态及其他我们需要记录的信息，这样当用户再次登陆的时候我们便可以利用cookie来生成相应的信息，如访问次数等，我们也可以用cookie做判断，当存在cookie的时候阻止某些操作（单纯靠cookie是不安全的）。

今天着重记录下html5的本地缓存机制，到底与cookie有哪些区别呢？

1.几乎所有浏览器都支持cookie，而本地存储（以下简称LocalStorage）在IE8+、Firefox3.0+、Opera10.5+、Chrome4.0+、Safari4.0+、iPhone2.0+、Andrioid2.0+等平台下得到支持。

2.cookie最大支持容量为4kb，而LocalStorage最大支持容量为5M.

3.与Cookie不同的时，LocalStorage的这些数据不会每次随着HTTP请求被发送到服务器端(当然如果你需要这么做，你可以自己编程实现）.

简单的说，HTML5本地存储是一种让网页可以把键值对存储在用户浏览器客户端的方法。像Cookie一样，这些数据不会因为你打开新网站，刷新页面，乃至关闭你的浏览器而消失。分为localStorage和sessionStorage，他们的用法一致。区别在于他们的时间限制不同。localStorage是不存在时间限制的。而sessionStorage这时基于session的数据存储，在关闭或者离开网站后，数据将会被删除。有一点在我看来不方便的是，localStorage不能像cookie那样自定义过期时间，如果需要时间的判断，则需要通过js来判断。

localStorage使用方法基本与cookie一致：

//判断是否支持本地存储
if(window.localStorage){
   do something
}else{
   do...
}

//存储数据
localStorage.a='value'
localStorage['a']='value'
localStorage.setItem("a","value")   //推荐使用

//读取数据
var a = localStorage["a"];
var a = localStorage.a;
var a = localStorage.getItem("a");//推荐使用

//清除键值
localStorage.removeItem("c");//如果希望一次性清除所有的键值对，可以使用clear()。

//HTML5还提供了一个key()方法，可以在不知道有哪些键值的时候使用
var storage = window.localStorage;
function showStorage(){
 for(var i=0;i<storage.length;i++){
  //key(i)获得相应的键，再用getItem()方法获得对应的值
  document.write(storage.key(i)+ " : " + storage.getItem(storage.key(i)) + "<br>");
 }
}

当然，同cookie，本地存储也可以存储json类数据，如下面代码：（仅为demo，没有那么规范严谨）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试</title>
<style>
input{width:60%;height:5%}
</style>
</head>
<script>
function save(){
    var obj=new Object();
    var name=document.getElementById('name').value;
    obj.name=document.getElementById('name').value;
    obj.moible=document.getElementById('mobile').value;
    obj.email=document.getElementById('email').value;
    obj.address=document.getElementById('address').value;
    if(window.localStorage){
        localStorage.setItem(name,JSON.stringify(obj))    
        alert('数据保存成功')
    }
}
function append(){
   var creat=document.createElement('div')    ;
   var s=''
   var name=document.getElementById('name').value;
   var data=JSON.parse(localStorage.getItem(name))
  // alert(data.name)
      s+='<table>'
   for(var i in data){      
      s+='<tr><td>'+i+'</td><td>'+data[i]+'</td></tr>' 
   }
      s+='</table>'
     // alert(s)     
  creat.innerHTML=s
  document.body.appendChild(creat)
}

      
</script>

<body>
<form id='hhe'>
<input type="text" id='name' /><Br />
<input type="text" id='mobile' /><Br />
<input type="text" id='email' /><Br />
<input type="text" id='address' /><Br />
<input type='button' value='保存数据' onclick='save()'/>
<input type='button' value='追加数据' onclick='append()' />
</form>
</body>
</html>

以前一直用jq，现在想好好研究下js，所以，呵呵呵，将就看吧

当点击保存数据时，我们看到localStorage中多了一条张三的json数据

然后当在第一行输入姓名时（一般这时候该做判断），我们点击追加数据，可以看到浏览器缓存数据已经可以显示出来了

posted @ 2015-07-08 22:41 走在起点阅读(314) 评论(0) 编辑收藏举报

刷新页面返回顶部

不疯魔不成活

html5本地存储