HTML5之本地存储
2016-05-08 22:33
369 查看
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>
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML5样式 链接 表格
- html5图形组合
- html5绘制变换图形-旋转图形
- PJAX初体验（主要是利用HTML5 新增API pushState和replaceState+AJAX）
- html5绘制渐变图形-图形缩放
- html5绘制变形图形-变换坐标原点
- HTML5之地理信息
- html5绘制图形渐变-径向渐变
- html5绘制渐变图形-线性渐变
- HTML5概述
- html5绘制基本图形-直线
- HTML5回调函数与地理定位
- html5绘制基本图形-圆形
- 使用Flexible实现手淘H5页面的终端适配
- Canvas学习
- html5画布-绘制矩形
- HTML5的思考
- 学些HTML5的一些小记
- 学些HTML5的一些小记
- 学些HTML5的一些小记