HTML5 Web Storage（读书笔记）
2012-06-09 14:48
162 查看
来自于《HTML5与CSS3权威指南》第七章的内容，Web Storage的一些基础知识。
HTML4中采用cookies存储机制，可以在客户端存储用户名等简单的用户信息。但存在以下几个问题：
1）大小：cookies的大小被限制在4KB；
2）带宽：cookies随HTTP事务一起被发送，因此会浪费一部分发送cookies时使用的带宽；
HTML5提供了在客户端本地保存数据的功能，即Web Storage功能。如下面示例所示：
1）sessionStorage
将数据保存在session对象中，数据保存是从用户进入浏览器到浏览器关闭这段时间。
sessionStorage.setItem(key,value); //保存数据
sessionStorage.getItem(key); //读取数据
2）localStorage
将数据保存在客户端本地的硬件设备（通常指硬盘等），即使浏览器关闭，数据仍然存在。
localStorage.setItem(key,value); //保存数据
localStorage.getItem(key); //读取数据
localStorage.removeItem(key); //删除指定key本地存储的值
（一）制作简单Web留言本
Web Storage保存数据时，以“键名/键值”这样的格式。
localStorage存储的值都是字符串类型，在处理复杂的数据时，比如json数据时，需要借助JSON类，将json字符串转换成真正可用的json格式。
1）var str=JSON.stringify(data);
将参数data表示要转换成JSON格式文本数据的对象，这个方法是将对象转换成JSON格式的文本数据。
2）var data=JSON.parse(str);
参数str表示从localStorage中获得的数据，这个方法表示将传入的数据转换成JSON对象。
Web Storage与Cookies相比的一些优势：
1）存储空间更大：IE8下每个独立的存储空间为10M，其他浏览器实现略有不同，但都比Cookie要大很多。
2）存储内容不会发送到服务器：当设置了Cookies后，Cookies的内容会随着请求一并发送的服务器，这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地，不会与服务器发生任何交互。
3）更多丰富易用的接口：Web Storage提供了一套更为丰富的接口，使得数据操作更为简便。
4）独立的存储空间：每个域（包括子域）有独立的存储空间，各个存储空间是完全独立的，因此不会造成数据混乱。
HTML4中采用cookies存储机制，可以在客户端存储用户名等简单的用户信息。但存在以下几个问题：
1）大小：cookies的大小被限制在4KB；
2）带宽：cookies随HTTP事务一起被发送，因此会浪费一部分发送cookies时使用的带宽；
HTML5提供了在客户端本地保存数据的功能，即Web Storage功能。如下面示例所示：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script type="text/javascript">
function SaveStorage(id){
var target=document.getElementById(id);
var str=target.value;
sessionStorage.setItem("message",str); //二选一
//localStorage.setItem("message",str);
alert("数据保存成功");
}
function LoadStorage(id){
var target=document.getElementById(id);
var msg=sessionStorage.getItem("message"); //二选一
//var msg=localStorage.getItem("message");
target.innerHTML=msg;
}
</script>
</head>
<body>
<h1>Web Storage</h1>
<p id="msg"></p>
<input type="text" id="input">
<input type="button" value="保存数据" onclick="saveStorage('input');" >
<input type="button" value="读取数据" onclick="LoadStorage('msg');" >
</body>
</html>1）sessionStorage
将数据保存在session对象中，数据保存是从用户进入浏览器到浏览器关闭这段时间。
sessionStorage.setItem(key,value); //保存数据
sessionStorage.getItem(key); //读取数据
2）localStorage
将数据保存在客户端本地的硬件设备（通常指硬盘等），即使浏览器关闭，数据仍然存在。
localStorage.setItem(key,value); //保存数据
localStorage.getItem(key); //读取数据
localStorage.removeItem(key); //删除指定key本地存储的值
（一）制作简单Web留言本
Web Storage保存数据时，以“键名/键值”这样的格式。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>简单留言本</title>
<script type="text/javascript">
function saveStorage(id){
var data=document.getElementById(id).value;
var time=new Date().getTime();
localStorage.setItem(time,data);
alert("数据保存成功");
loadStorage('msg');
}
function loadStorage(id){
var result='<table border="1">';
for(var i=0;i<localStorage.length;i++){
var key=localStorage.key(i);
var value=localStorage.getItem(key);
var date=new Date();
date.setTime(key);
var datastr=date.toGMTString();
result+='<tr><td>' + value + '</td><td>' + datastr +'</td></tr>';
}
result+='</table>';
var target=document.getElementById(id);
var msg=sessionStorage.getItem("message");
target.innerHTML=result;
}
function clearStorage(){
localStorage.clear(); //清除客户端本地存储的数据
alert("全部数据被清除");
loadStorage('msg');
}
</script>
</head>
<body>
<h1>Web Storage</h1>
<textarea id="memo" cols="60" rows="10"></textarea><br/>
<input type="button" value="追加" onclick="saveStorage('memo');" >
<input type="button" value="初始化" onclick="clearStorage('msg');" >
<hr>
<p id="msg"></p>
</body>
</html>（二）作为简单数据库使用localStorage存储的值都是字符串类型，在处理复杂的数据时，比如json数据时，需要借助JSON类，将json字符串转换成真正可用的json格式。
1）var str=JSON.stringify(data);
将参数data表示要转换成JSON格式文本数据的对象，这个方法是将对象转换成JSON格式的文本数据。
2）var data=JSON.parse(str);
参数str表示从localStorage中获得的数据，这个方法表示将传入的数据转换成JSON对象。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>简易数据库示例</title>
<script type="text/javascript">
function saveStorage(){
var data=new Object();
data.name=document.getElementById("name").value;
data.email=document.getElementById("email").value;
data.tel=document.getElementById("tel").value;
data.memo=document.getElementById("memo").value;
var str=JSON.stringify(data);
localStorage.setItem(data.name,str);
alert("数据保存成功");
}
function findStorage(id){
var find=document.getElementById("find").value;
var str=localStorage.getItem(find);
var data=JSON.parse(str);
var result="姓名：" + data.name + "<br>";
result+= "EMAIL：" + data.email + "<br>";
result+= "电话号码：" + data.tel + "<br>";
result+= "备注：" + data.memo + "<br>";
var target=document.getElementById(id);
target.innerHTML=result;
}
</script>
</head>
<body>
<h1>使用Web Storage来做简易数据库示例</h1>
<table border="1">
<tr>
<td>姓名：</td>
<td><input type="text" id="name"></td>
</tr>
<tr>
<td>EMAIL：</td>
<td><input type="text" id="email"></td>
</tr>
<tr>
<td>电话号码：</td>
<td><input type="text" id="tel"></td>
</tr>
<tr>
<td>备注：</td>
<td><input type="text" id="memo"></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="保存" onclick="saveStorage();"></td>
</tr>
</table>
<hr>
<p>检索：<input type="text" id="find">
<input type="button" value="检索" onclick="findStorage('msg');">
</p>
<p id="msg"></p>
</body>
</html>Web Storage与Cookies相比的一些优势：
1）存储空间更大：IE8下每个独立的存储空间为10M，其他浏览器实现略有不同，但都比Cookie要大很多。
2）存储内容不会发送到服务器：当设置了Cookies后，Cookies的内容会随着请求一并发送的服务器，这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地，不会与服务器发生任何交互。
3）更多丰富易用的接口：Web Storage提供了一套更为丰富的接口，使得数据操作更为简便。
4）独立的存储空间：每个域（包括子域）有独立的存储空间，各个存储空间是完全独立的，因此不会造成数据混乱。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML5 Web Storage
- HTML5本地存储 Web Storage
- HTML5中的Web Storage(sessionStorage||localStorage)理解与简单实例
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记2
- 《响应式Web设计——html5和css3实战》读书笔记
- HTML5 高级系列：web Storage 学前端开发要先看这个
- HTML5之本地存储对象Web Storage和storage事件监听无效问题
- HTML5 高级系列：web Storage
- HTML5 Web Storage
- [思维导图] HTML5 Step by Step 读书笔记
- HTML5本地存储-Web Storage
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3
- HTML5 本地存储（Web Storage）
- HTML5 Web存储(Web Storage)技术及用法
- HTML5中的Web Storage(sessionStorage||localStorage)理解与简单实例
- 使用 jQuery Mobile 与 HTML5 开发 Web App（十六） —— HTML5 Web Storage
- html5中本地存储Web Storage
- html5中的web storage的用法
- HTML5 Web存储(Web Storage)技术及用法
- HTML5学习05-Web Storage存储