标签：
HTML5之本地存储
l Cookie
? 数据存储到计算机中，通过浏览器控制添加与删除数据
l Cookie的特点
? 存储限制
– 域名100个cookie,每组值大小4KB
? 客户端、服务器端，都会请求服务器（头信息）
? 本地存储也会请求服务器
? 页面间的cookie是共享
l Storage
? sessionStorage
– session临时回话，从页面打开到页面关闭的时间段
– 窗口的临时存储，页面关闭，本地存储消失
? localStorage
– 永久存储（可以手动删除数据）
l Storage的特点
? 存储量限制 ( 5M )
? 客户端完成，不会请求服务器处理
? sessionStorage数据是不共享、 localStorage共享
l Storage API
? setItem():
– 设置数据，key\value类型，类型都是字符串
– 可以用获取属性的形式操作
? getItem():
– 获取数据，通过key来获取到相应的value
? removeItem():
– 删除数据，通过key来删除相应的value
? clear():
– 删除全部存储的值
<script>
window.onload = function(){
varaInput = 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>
? 例子 : 保存注册信息
<script>
window.onload = function(){
varaInput = document.getElementsByTagName(‘input‘);
varoT = document.getElementById(‘t1‘);
if(window.localStorage.getItem(‘name‘) ){
aInput[0].value= window.localStorage.getItem(‘name‘);
}
if(window.localStorage.getItem(‘sex‘) ){
for(vari=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(vari=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>
l Storage API
? 存储事件:
– 当数据有修改或删除的情况下，就会触发storage事件
– 在对数据进行改变的窗口对象上是不会触发的
– Key : 修改或删除的key值，如果调用clear(),key为null
– newValue : 新设置的值，如果调用removeStorage(),key为null
– oldValue: 调用改变前的value值
– storageArea: 当前的storage对象
– url: 触发该脚本变化的文档的url
– 注：session同窗口才可以,例子：iframe操作
<script>
window.onload = function(){
varaInput = 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>
? 例子 : 同步购物车
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload = function(){
varaInput = document.getElementsByTagName(‘input‘);
for(vari=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(vari=0;i<aInput.length;i++){
if(ev.newValue == aInput[i].value ){
aInput[i].checked= true;
}
}
}
elseif( ev.key == ‘onSel‘ ){
for(vari=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>
标签：
原文地址：http://blog.csdn.net/u013267266/article/details/51348278
