HTML4中使用cookies在客户端保存诸如用户名等简单的信息，但是，使用cookies存储永久数据存在以下问题：
大小：cookies的大小限制在4KB
带宽：cookies是随HTTP事务一起被发送的，因此会浪费一部分带宽
复杂性：正确的操纵cookies是很困难的
HTML5重新提供了一种在客户端本地保存数据的功能，Web Storage
Web Storage功能，就是在Web上存储数据，分为两种：
sessionStorage：将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，session对象可用来保存在这段时间内所要求保存的任何数据
localStorage：将数据保存在客户端本地的硬件设备中，即使浏览器关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可用
区别：sessionStorage为临时保存，localStorage为永久保存
HTML5中提供了localStorage对象可以将数据长期保存在客户端，直到人为清除。localStorage提供了几个方法:
1、存储：localStorage.setItem(key,value)
如果key存在时，更新value
2、获取：localStorage.getItem(key)
如果key不存在返回null
3、删除：localStorage.removeItem(key)
一旦删除，key对应的数据将会全部删除
4、全部清除：localStorage.clear()
某些时候使用removeItem逐个删除太麻烦，可以使用clear,执行的后果是会清除所有localStorage对象保存的数据
5、遍历localStorage存储的key
.length 数据总量，例：localStorage.length
.key(index) 获取key，例：var key=localStorage.key(index);
6、存储JSON格式数据
JSON.stringify(data) 将一个对象转换成JSON格式的数据串,返回转换后的串
JSON.parse(data) 将数据解析成对象，返回解析后的对象
客户的信息分为：姓名、E-Mail地址、电话号码、备注，需要把它们保存在localStorage中，如果输入用户姓名，可以进行检索并获取该客户的所有信息
实例：实现一个简单的对cookies内 localStorage 对文本框信息在html页面输出：
代码如下：
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="utf-8" />
-
<title></title>
-
</head>
-
<body>
-
姓名： <input type="text" placeholder="请输入你的名字" id="name"/><br />
-
年龄： <input type="text" placeholder="请输入的你的年龄" id="age"/><br />
-
性别： <input type="text" placeholder="请输入的你的年龄" id="sex"/><br />
-
爱好： <input type="text" placeholder="请输入的你的年龄" id="hoby"/><br />
-
运动： <input type="text" placeholder="请输入的你的年龄" id="sport"/><br />
-
<button id="btn">保存 </button><br />
-
输入<input type="text" placeholder="输入你要查找的人" id="search"/><br />
-
<button id="btn2">检索</button><br />
-
<div id="box" style="border: 1px solid red; width: 100px; height: 200px;"></div>
-
-
</body>
-
<script type="text/javascript">
-
var n = document.getElementById("name");
-
var age = document.getElementById("age")
-
var btn= document.getElementById("btn");
-
var search = document.getElementById("search");
-
var btn2= document.getElementById("btn2");
-
var box =document.getElementById("box");
-
var sex =document.getElementById("sex");
-
var hoby=document.getElementById("hoby");
-
var sport =document.getElementById("sport");
-
-
-
-
var obj={}; //新建一个对象存储数据
-
btn.onclick = function(){
-
//把输入的信息写入localStorage中去
-
//把所需的信息传给这个对象
-
obj.name=n.value;
-
obj.age = age.value;
-
obj.sex= sex.value;
-
obj.hoby=hoby.value;
-
obj.sport=sport.value;
-
//把这个对象呢，以JSON的格式传给一个变量（字符串形式）赋给一个变量
-
var value = JSON.stringify(obj);
-
//放进localStorage里面
-
localStorage.setItem(obj.name,value);
-
-
}
-
btn2.onclick = function(){
-
//搜索的input的value赋值给一个变量
-
var n1=search.value;
-
//遍历localStorage
-
for(var i=0; i<localStorage.length;i++){
-
//把localStorage键值赋给一个变量进行下一步的判断
-
var k = localStorage.key(i);
-
console.log(k);
-
if( k == n1){
-
//获取到localStorage的键值
-
var value =localStorage.getItem(k);
-
//将得到的value进行JSON.parse进行转译
-
var a = JSON.parse(value);
-
//最后输出在html页面上
-
box.innerHTML="
"
+"姓名："+a.name +""+""
+"年龄："+a.age +""+""
+"性别："+a.sex +""+""
+" 爱好："+a.hoby +""+""
+"运动："+a.sport +"";
-
-
}
-
-
}
-
-
-
}
-
-
</script>
-
</html>
现象的效果：
成功写入：
成功查找：
阅读(1181) | 评论(0) | 转发(0) |
