HTML5客户端数据存储WebStorage—localStorage与sessionStorage

HTML5提供了在客户端存储数据的新方法Web Storage
类似于HTML4中的Cookie
不过它要强大的多

Cookie

先来简单复习一下之前使用的cookie

cookie存储数据到用户设备上，存储的数据量较小只有4KB
可以通过navigator.cookieEnabled检测是否开启了cookie

var timestamp = (new Date()).getTime() + 10000;var expires = new Date(timestamp).toGMTString();
//或toUTCStringdocument.cookie = "key=value;expires="+expires;

function getCookie(name) {
 var name = name + "="; 
 var ary = document.cookie.split(';'); 
 for(var i = 0; i < ary.length; i++){ 
 var c = ary[i]; 
 while (c.charAt(0) == ' '){
 c = c.substring(1);
 } 
 if (c.indexOf(name) != -1){ 
 return c.substring(name.length, c.length);
 }
 } return "";
}

Web Storage

Web Storage又分为两种
localStorage和sessionStorage
它们的区别是：

简单使用

Web Storage只能存储字符串数据
我觉得可以把它们理解为JSON
使用方法都是类似的，已localStorage为例

localStorage.name = 'payen';
localStorage.info = JSON.stringify({name: 'payen', age: 20});
console.log(localStorage.name);
console.log(JSON.parse(localStorage.info));

要存储的数据名就是localStorage的属性名
普通的字符串正常存储就可以了
对象数据可以利用JSON.stringify()将其转换为字符串格式
使用的时候再用JSON.parse()转换回对象格式
（如果直接存储对象的话，它会被强制转换为字符串 “[object Object]”）

删除数据直接delete就好

delete localStorage.name;delete localStorage.info;

如果不删除的话，localStorage里面的数据就会一直存在于你的浏览器了

API

localStorage和sessionStorage还提供了简单的API
类似于一个客户端的数据库
（API都是相同的）
常用的有以下几个：

实例

通过这个，我们可以写个简易的通讯录

<p id="container">
 <br>
 <label for="username">姓名：</label>
 <input type="text" id="username" name="username">
 <br>
 <label for="mobilephone">手机：</label>
 <input type="text" id="mobilephone" name="mobilephone">
 <br><br>
 <input type="button" onclick="add()" id="add" value="增加联系人">
 <br><br>
 <hr>
 <label for="search">输入姓名：</label>
 <input type="text" id="search" name="search">
 <br><br>
 <input type="button" onclick="find()" id="find" value="查找手机号">
 <p id="result"><br></p></p>

#container { 
border: 2px solid gray; 
width: 320px; 
text-align:center;}

JavaScript中就是实现这两个函数

var user = document.getElementById('username'),
 phone = document.getElementById('mobilephone'),
 search = document.getElementById('search'),
 result = document.getElementById('result');var add = function(){
 var u = user.value,
 p = phone.value,
 l = localStorage.length; if(u !== '' && p !== ''){
 localStorage.setItem(u, p);
 user.value = '';
 phone.value = '';
 alert('添加成功');
 }
};var find = function(){
 var s = search.value,
 r = localStorage.getItem(s); if(s !== '' && r){
 result.innerHTML = r;
 }
};

输入姓名和手机添加联系人
然后在下面输入联系人姓名我们可以查找到手机号

当然这个通讯录十分简易了
也可以为它添加显示通讯录全部信息
删除联系人功能等等

cookie与Web Storage区别

最后说说Html5的Web Storage和Html4的cookie的区别