HTML5本地存储
这次做项目有一些简单设置，说不用后台给接口，让做在本地，用本地存储，，所以现
学习了本地存储 了。。
其实还是蛮简单的。
讲解的目录：
1，cookie
2，cookie的特点
3，storage
4，storage的特点
5，storage API
1，cookie：
数据存储到计算机中，通过浏览器控制添加与删除数据。
2，cookie的特点：
存储限制（一域名100个cookie，每组值大小4KB）
客户端，服务器端，都会请求服务器（头信息）
页面间的cookie是共享
3，storage：
sessionStorage
session临时回话，从页面打开到页面关闭的时间段，
窗口的临时存储，页面关闭，本地存储消失
localStorage
永久存储（可以手动删除数据）
4，storage的特点：
存储量限制（5M）
客户端完成，不会请求服务器处理
sessionStorage数据不共享，localStorage共享
5，storage API
setItem();设置数据，key/value类型，类型都是字符串。。可以用获取属性的形式操作
getItem(); 获取数据，通过key来获取到相应的value
removeItem(); 删除数据，通过key来删除相应的value
clear(); 删除全部存储的值
简单的设置获取例子：
<!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>
<script>
window.onload = function(){
var aInput = document.getElementsByTagName('input');
aInput[0].onclick = function(){
//sessionStorage : 临时性存储
//localStorage : 永久性存储
//window.sessionStorage.setItem('name',aInput[3].value);
window.localStorage.setItem('name',aInput[3].value);
};
aInput[1].onclick = function(){
//alert(window.sessionStorage.getItem('name'));
alert(window.localStorage.getItem('name'));
};
aInput[2].onclick = function(){
window.localStorage.removeItem('name');
//window.localStorage.clear(); //删除全部数据
};
};
</script>
</head>
<body>
<input type="button" value="设置" />
<input type="button" value="获取" />
<input type="button" value="删除" />
<input type="text" />
</body>
</html>注册信息时没有保存关了浏览器数据不消失
<!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>
<script>
window.onload = function(){
var aInput = document.getElementsByTagName('input');
var oT = document.getElementById('t1');
if( window.localStorage.getItem('name') ){
aInput[0].value = window.localStorage.getItem('name');
}
if( window.localStorage.getItem('sex') ){
for(var i=1;i<aInput.length;i++){
if( aInput[i].value == window.localStorage.getItem('sex') ){
aInput[i].checked = true;
}
}
}
if( window.localStorage.getItem('ta') ){
oT.value = window.localStorage.getItem('ta');
}
window.onunload = function(){
if( aInput[0].value ){
window.localStorage.setItem('name', aInput[0].value);
}
for(var i=1;i<aInput.length;i++){
if( aInput[i].checked == true ){
window.localStorage.setItem('sex', aInput[i].value);
}
}
if( oT.value ){
window.localStorage.setItem('ta', oT.value);
}
};
};
</script>
</head>
<body>
<p>
用户名:<input type="text" />
</p>
<p>
性别 : <input type="radio" value="男" name="sex" />男
<input type="radio" value="女" name="sex" />女
</p>
内容 : <textarea id="t1">
</textarea>
</body>
</html>存储事件：
当数据有修改或者删除的情况下，就会触发storage事件
在对数据进行改变的窗口对象上是不会触发的
key：修改或删除的key值，如果调用clear(),key为null
newValue：新设置的值，如果调用removeStorage(),key为null
oldValue：调用改变前的value值
storageArea：当前的storage对象
url：触发该脚本变化的文档的url
注：session同窗口才可以，例子，iframe操作
例子：当前页面不会触发，在新开页面触发
<!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>
<script>
window.onload = function(){
var aInput = document.getElementsByTagName('input');
aInput[0].onclick = function(){
window.localStorage.setItem('name',aInput[3].value);
};
aInput[1].onclick = function(){
alert(window.localStorage.getItem('name'));
};
aInput[2].onclick = function(){
window.localStorage.removeItem('name');
};
window.addEventListener('storage',function(ev){ //当前页面的事件不会触发
//alert(123);
console.log( ev.key );
console.log( ev.newValue );
console.log( ev.oldValue );
console.log( ev.storageArea );
console.log( ev.url );
},false);
};
</script>
</head>
<body>
<input type="button" value="设置" />
<input type="button" value="获取" />
<input type="button" value="删除" />
<input type="text" />
</body>
</html>例子：同步购物车
<!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>
<script>
window.onload = function(){
var aInput = document.getElementsByTagName('input');
for(var i=0;i<aInput.length;i++){
aInput[i].onclick = function(){
if(this.checked){
window.localStorage.setItem('sel',this.value);
}
else{
window.localStorage.setItem('onSel',this.value);
}
};
}
window.addEventListener('storage',function(ev){ //当前页面的事件不会触发
if( ev.key == 'sel' ){
for(var i=0;i<aInput.length;i++){
if( ev.newValue == aInput[i].value ){
aInput[i].checked = true;
}
}
}
else if( ev.key == 'onSel' ){
for(var i=0;i<aInput.length;i++){
if( ev.newValue == aInput[i].value ){
aInput[i].checked = false;
}
}
}
},false);
};
</script>
</head>
<body>
<input type="checkbox" value="香蕉" />香蕉<br />
<input type="checkbox" value="苹果" />苹果<br />
<input type="checkbox" value="西瓜" />西瓜<br />
<input type="checkbox" value="哈密瓜" />哈密瓜<br />
</body>
</html>可以把例子考过去试试，，很实用哟
对浏览器版本又要求哟，，
相关推荐
表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...