一、本地存储的基本介绍
说到本地存储,我们最熟悉的应该就是cookie存储,数据存储到计算机中,通过浏览器控制添加与删除数据。那cookie有什么特点呢?
①存储限制–
域名
100
个
cookie,
每组值大小
4KB
②客户端、服务器端,都会请求服务器(头信息)
③页面间的 cookie 是共享的
具体cookie是怎么操作的,我会在javascript栏目的博客中详细叙述的。接下来我们一起接触一下html5中的本地存储-sessionStorage和localStorage.
session 为临时会话,从页面打开到页面关闭的时间段,窗口的临时存储,页面关闭,本地存储就会消失。localStorage为永久存储,当然可以手动删除数据。那storage存储相对于cookie它的特点有哪些呢?
①存储量将会达到5M
②客户端完成,不会请求服务器处理
③sessionStorage数据是不会共享的,而localStorage数据是会共享的
②客户端、服务器端,都会请求服务器(头信息)
③页面间的 cookie 是共享的
具体cookie是怎么操作的,我会在javascript栏目的博客中详细叙述的。接下来我们一起接触一下html5中的本地存储-sessionStorage和localStorage.
session 为临时会话,从页面打开到页面关闭的时间段,窗口的临时存储,页面关闭,本地存储就会消失。localStorage为永久存储,当然可以手动删除数据。那storage存储相对于cookie它的特点有哪些呢?
①存储量将会达到5M
②客户端完成,不会请求服务器处理
③sessionStorage数据是不会共享的,而localStorage数据是会共享的
二、storageAPI的使用
setItem() |
–设置数据,key\value类型,类型都是字符串
–可以用获取属性的形式操作
|
getItem() |
–获取数据,通过key来获取到相应的value
|
removeItem() |
–删除数据,通过key来删除相应的value
|
clear() |
–删除全部存储的值
|
通过上面的API,我们来做一个<保存注册信息>的小应用,代码如下:
<span style="font-size:18px;"><!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>
<style>
textarea{width:400px;height:400px;border:1px solid black;}
</style>
<script>
window.onload = function(){
var aInput = document.getElementsByTagName('input');
var oT = document.getElementsByTagName('textarea')[0];
if( localStorage.getItem('text') ){
aInput[0].value = <span style="color:#FF0000;">localStorage.getIte</span>m('text');
}
if( localStorage.getItem('password') ){
aInput[1].value = localStorage.getItem('password');
}
if( localStorage.getItem('radio') ){
aInput[localStorage.getItem('radio')].checked = true;
}
if(localStorage.getItem('oT')){
oT.value = localStorage.getItem('oT');
}
//关闭浏览器的时候先将数据存储起来
window.onunload = function(){
if( aInput[0].value ){
<span style="color:#FF0000;">localStorage.setItem</span>('text',aInput[0].value);
}
if( aInput[1].value ){
localStorage.setItem('password',aInput[1].value);
}
for(var i =2;i < aInput.length;i++){
if( aInput[i].checked ){
localStorage.setItem('radio',i);
}
}
if( oT.value ){
localStorage.setItem('oT',oT.value);
}
};
};
</script>
</head>
<body>
<p>
姓名:<input type='text' />
</p>
<p>
密码:<input type='password' />
</p>
<p>
<input type='radio' name='sex' value='man'/>男
<input type='radio' name='sex' value='women'/>女
</p>
<p>
备注:<br/>
<textarea>
</textarea>
</p>
</body>
</html>
</span>
三.存储事件
当数据有修改或删除的情况下,就会触发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');
for(var i = 0;i < aInput.length;i++){
aInput[i].onclick = function(){
if( this.checked ){
localStorage.setItem(this.value,1);
}else{
localStorage.setItem(this.value,0);
}
};
}
window.onstorage = function(){
for(var i = 0;i < aInput.length;i++){
if( localStorage.getItem(aInput[i].value) == 1){
aInput[i].checked = true;
} else if( localStorage.getItem(aInput[i].value) == 0 ){
aInput[i].checked = 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>